悬停的Div风格变化？

我试过下面的代码，当鼠标悬停在它上面时，改变DIV（.thumbnail）的一些css属性（.overthumb）。但是，它不起作用！任何提示都会对如何让它工作起到很好的作用。如果可能的话，也要对动画进行更改。悬停的Div风格变化？

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

来源

2011-12-15 Andy

，我认为这可以用CSS来实现，你可以发布HTML？ – FakeRainBrigand 2011-12-15 15:46:54

什么意思是“它不工作”？你想要什么结果？ overthumb隐藏在缩略图悬停上 – ggzone 2011-12-15 15:48:29

你可以用CSS做所有这些。

http://jsfiddle.net/6wQp3/

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

来源

2011-12-15 15:51:54 FakeRainBrigand

惊人而好的逻辑。 – 2011-12-15 16:43:24

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

这里举例：http://jsfiddle.net/peduarte/XsJAK/

顺便说一句，你可以做的一切，只用CSS。

来源

2011-12-15 15:49:13 peduarte

它为我

你确定你的第一个元素有一类称为缩略图，第二个有一个名为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

来源

2011-12-15 15:49:30 Shyju

我会使用：悬停设施的CSS，然后因素在IE浏览器的少量JavaScript。

来源

2011-12-15 15:49:50 kolin

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

你可以使用css完成同样的事情，并且这也是推荐的，因为它更干净。如果你不打算在:hover上执行任何其他JavaScript方法，这是要走的路。

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

.thumbnail .overthumb { 
    display:none; 
}

来源

2011-12-15 15:49:53

欣赏建议。我已经采取了一些做其他事情的代码并尝试去适应它。不成功。再次感谢。 – Andy 2011-12-15 15:57:33

做了一个简单的动画也检查了这Fiddle，我已经使用jQuery的Animate()功能

来源

2011-12-15 15:59:41

悬停的Div风格变化？

回答

相关问题