Question

我有一个案例：

HTML：

<div class="a b">
    <span class="one">Success ONE</span>
    <span class="two">ONE</span>
</div>

<div class="a b">
    <span class="one">Success TWO</span>
    <span class="two">TWO</span>    
</div>

我想显示默认隐藏的.two。如果我使用CSS，我可以使用：

.two {visibility:hidden;}
.a:hover .two {visibility:visible;}

使用CSS时效果很好，但就我而言，我必须对此css .a：hover .two {visibility：visible;} 进行评论。

我想用JavaScript显示.two。你能不能帮我展示.two在盘旋时。（我希望JavaScript的结果与使用.a:hover .two {visibility:visible;}）

相同

Answer 1

我不确定为什么你想用JS做这件事时可以用CSS完成但是你去了：

CSS

.two {display:none;}

JS

$(".a").hover(function(){
   $(this).find(".two").toggle();
});

FIDDLE

//编辑

这是我原来的答案。我更改了它以缩短代码，但我将重新发布它：

$(".a").hover(function(){     
    $(this).find(".two").css({"visibility":"visible"}); 
}, function(){     
    $(this).find(".two").css({"visibility":"hidden"}); 
});

Answer 2

首先你必须在css中声明。

.two {display:none;}

之后做这样的事情。

<script>
$(document).ready(function(){
  $(".a").hover(function(){
    $(this).find('> .two').css("display","block");
  },function(){
    $(this).find('> .two').css("display","none");
  });
});
</script>

Answer 3

问题解决了。我正在使用Javascript：

$(".a").hover(function(){
    $(this).find(".two").css({"visibility":"visible"});
}, function(){
    $(this).find(".two").css({"visibility":"hidden"});
});

这是@ jmore009在编辑他的最后一个答案之前的回答。

如何用Javascript中的鼠标悬停显示课程？

3 个答案: