Довольно странный вопрос css / opacity / hover - PullRequest
Новая
       5

Довольно странный вопрос css / opacity / hover

2 голосов
/ 18 июля 2010

Извините за название, я действительно не мог придумать, как упростить эту проблему.

Теперь проблема в следующем: у меня есть ряд миниатюрных изображений в div: 

<div id="daumen">

<a href='#' class='gsc_thumb_row'>
    <img src='image1.jpg' class='thumbnails' />
</a>

<a href='#' class='gsc_thumb_row'>
    <img src='image2.jpg' class='current-thumbnail'/>
</a>

<a href='#' class='gsc_thumb_row'>
     <img src='image3.jpg' class='thumbnails' />
</a>

</div>

(я не могу изменить HTML, он доставляется скриптом.)

Как вы могли заметить, у двух из них есть класс "thumbnails" и один "current-thumbnail".

Я бы хотел, чтобы это случилось так: По умолчанию все изображения, кроме текущего эскиза, имеют непрозрачность 0,5. При наведении курсора непрозрачность должна измениться на 1.

CSS, который я использую: 

#daumen {

    }

#daumen img:hover{
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    }

#daumen img{
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
    }

.current-thumbnail a:link{
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    }        

.thumbnails {

    }

.current-thumbnail {

}

1015 *

Пока что все это работает, за исключением того, что непрозрачность текущего эскиза также установлена ​​на 0,5 - как мне этого избежать?

Я уверен, что есть очень простое решение, но я уже слишком долго возился с CSS.

Я положил его в скрипку для вас: http://jsfiddle.net/6DGAx/

Заранее спасибо, Cenk

Ответы [ 3 ]

3 голосов
/ 18 июля 2010

должно быть 

#daumen .thumbnail{

вместо 

#daumen img{

если вы хотите выбрать миниатюру класса

3 голосов
/ 18 июля 2010

Сделайте его более конкретным селектором: 

#daumen .current-thumbnail a:link{

Также, убедитесь, что ваша разметка соответствует вашему CSS , потому что ваш img имеет этот класс .........

0 голосов
/ 18 июля 2010

1-й из всех, что вы нацеливаете свой элемент неправильно, потому что внутри элемента с классом current-thumbnail нет a, как вам подсказывает текущее правило (.current-thumbnail a:link)

, оно должно быть #daumen .current-thumbnail

...