Изменение стиля Div при наведении?

Question

Я попробовал следующий код, чтобы изменить некоторые свойства CSS (.overthumb) DIV (.thumbnail), когда на него наведена мышь. Но это не работает !!! Любые советы были бы хорошими о том, как заставить это работать. Если возможно, то и для анимации изменений.

$(document).ready(function(){
    $(".thumbnail").hover(
        function(){
            $(".overthumb").show();
        },
        function(){
            $(".overthumb").hide();
        }
    );
});

Answer 1

Вы можете сделать все это с помощью CSS.

http://jsfiddle.net/6wQp3/

---

Вот обновленная версия .Я забыл установить div в position: relative;.Теперь наложение должно появиться относительно родительского div.

Answer 2

Также сделал простую анимацию, отметьте это Fiddle , я использовал функцию jQuery Animate()

Answer 3

Предоставленный код выглядит правильно, поэтому, вероятно, что-то не так в другом месте.

Вы можете сделать то же самое с помощью css, и это также рекомендуется, поскольку он чище.Если вы не собираетесь выполнять какие-либо другие методы javascript на :hover, это путь.

.thumbnail:hover .overthumb {
  /* display:block; */
  display:inline;
}

.thumbnail .overthumb {
  display:none;
}

Answer 4

Я бы использовал средство: hover в css, а затем добавил бы небольшое количество JavaScript для IE.

Answer 5

у меня работает

Вы уверены, что ваш первый элемент имеет класс с именем thumbnail, а второй - с классом overthumb

Вот рабочий образец: http://jsfiddle.net/qBsya/

Если вы хотите изменить некоторые свойства CSS, вот пример (Это обновляет цвет фона)

$(document).ready(function(){
$(".thumbnail").hover(
    function(){
        $(".overthumb").css('background', '#C1A3A5').show();
    },
    function(){
        $(".overthumb").css('background', '#FFF').hide();
    }
);

});

рабочий образец: http://jsfiddle.net/qBsya/4

Answer 6

.hide и .show просто покажут и скроют его.
Вам нужна функция .css, чтобы изменить css.Более подробная информация здесь: http://api.jquery.com/css/

Пример здесь: http://jsfiddle.net/peduarte/XsJAK/

Кстати, вы можете сделать все это только с помощью CSS.