jquery .class функция наведения .. применять стили для отдельных элементов, а не группы - PullRequest
Новая
       14

jquery .class функция наведения .. применять стили для отдельных элементов, а не группы

0 голосов
/ 27 июля 2011

У меня есть следующий код: 

var shadow = "#FF00FF 0 50px 90px inset";

$('#element').find('a.thumbnail').hover(function() {
     $(this).css({ '-webkit-box-shadow': shadow, '-moz-box-shadow': shadow, '-khtml-box-shadow': shadow, 'box-shadow': shadow});
},
function(){
     $(this).css({'background-color': 'transparent', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none', '-khtml-box-shadow': 'none', 'box-shadow': 'none'});
});

Но проблема в том, что box-shadow применяется ко всей группе .thumbnails .. Таким образом, первый div с миниатюрами имеет более темный цвет, чем последнийthumbnail div (box shadow) ..

Хотя я пытаюсь добиться эффекта тени, применяемого только к скрытому миниатюре.

Что я делаю не так?

Редактировать: разметка выглядит следующим образом: 

<div id="element">

<a class="thumbnail" href="xxx">
    <img src="" />
    <span>Title</span>
    <div class="thumbnail_description">Description</div>
</a>

*** Repeat ***

</div>

. Отображение эскиза: блок

Спасибо, Уэсли

Ответы [ 2 ]

1 голос
/ 27 июля 2011

ваш код должен работать.
Вот живой пример вашего собственного кода, и вы можете видеть, что он работает.
Возможно, у вас была ошибка где-то еще на странице или что-то вродечто.

1 голос
/ 27 июля 2011

Почему вы даже используете JavaScript?Вы просто добавляете тени к тегу <a> при наведении курсора вправо

В своем CSS-файле: 

a.thumbnail:hover {
    -webkit-box-shadow: #FF00FF 0 50px 90px inset;
    -moz-box-shadow: #FF00FF 0 50px 90px inset;
    .... etc
}

Правка, вот способ jQuery сделать это из вашего примера, какой FYIЭто безумие. 

$('a.thumbnail', '#element').hover(function() {
     $(this).css({ '-webkit-box-shadow': shadow, '-moz-box-shadow': shadow, '-khtml-box-shadow': shadow, 'box-shadow': shadow});
},
function(){
     $(this).css({'background-color': 'transparent', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none', '-khtml-box-shadow': 'none', 'box-shadow': 'none'});
});
...