Question

当鼠标悬停在DIV（.thumbnail）上时，我尝试了以下代码来更改DIV（.thumbnail）的某些css属性（.overthumb）。但是，它不起作用！有关如何使其正常工作的任何提示都会很好。如果可能，也可以对动画进行更改。

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

Answer 1

你可以用CSS完成所有这些。

http://jsfiddle.net/6wQp3/

这是一个updated version。我忘了将div设置为position: relative;。现在叠加层应该相对于父div显示。

Answer 2

.hide和.show只会显示和隐藏它您需要.css函数来更改css。更多信息：http://api.jquery.com/css/

此处示例：http://jsfiddle.net/peduarte/XsJAK/

顺便说一下，你可以用CSS完成所有这些。

Answer 3

它对我有用

你确定你的第一个元素有一个名为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 4

我会使用css的hover工具，然后为IE浏览少量的javascript。

Answer 5

提供的代码看起来是正确的，所以其他地方可能有问题。

你可以使用css完成同样的事情，这也是值得推荐的，因为它更干净。如果您不打算在:hover上执行任何其他javascript方法，那么这就是您的选择。

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

.thumbnail .overthumb {
  display:none;
}

Answer 6

也做了一个简单的动画，检查这个Fiddle，我使用了jQuery的Animate()函数

悬停时Div样式改变？

6 个答案: