兄弟姐妹hover不透明度

根据这个问题 ，我试图在另一个徘徊时，一组两个中的一个导航元素消失。 因为一个必然先于另一个，所以目前显然不可能使用CSS，因此需要使用jQuery。

我在页面顶部（在脚本元素中）有以下jQuery行，但它似乎不起作用：

$(document).ready(function(){ $('.sb-bignav:hover').siblings().css({ 'opacity': '0', '-webkit-opacity': '0', '-moz-opacity': '0' }); }); 

我假设语法本身是正确的，所以我认为我只是没有做到这一点……任何人都可以指出什么是错的？

谢谢！

编辑：根据要求，这是HTML：

Answer 1

你的脚本可以正常工作：

jsFiddle1

但我认为你希望你的程序工作：

jsFiddle2

也：

.on（）文档

和

.siblings（）文档

Answer 2

我不确定我们可以使用伪类：hover作为选择器…但我想你需要这样的东西

  $('.sb-bignav').hover(function() { $(this).siblings().css({ 'opacity': '0', '-webkit-opacity': '0', '-moz-opacity': '0' }); }); 

Answer 3

据我所知，您可以对脚本执行以下操作：

 $(document).ready(function(){ $('.sb-bignav').each(function(){ $(this).hover(function(){ $(this).siblings().css('color', 'red'); $(this).css('color', 'black'); }); }); }); 

只需更改颜色：红色到不透明度/显示无。 颜色：黑色是用于hover的元素。

Answer 4

你的问题，@ NaOH，是非常基本的（没有双关语意）。 您可以使用jQuery .hover()方法来完成此任务。 你可以替换任何css效果，但我认为这是你想要达到的效果：

 $(document).ready(function() { $('.sb-bignav').hover(function() { $(this).siblings('.sb-bignav').css('visibility','hidden'); }, function() { $(this).siblings('.sb-bignav').css('visibility','visible'); }); }); 

DEMO