如何在Javascript中显示悬停类

How to show class with hovering in Javascript?

本文关键字：显示 悬停 Javascript      更新时间：2023-09-26

我有一个案例：

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>

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

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

它在使用CSS时工作得很好，但在我的情况下，我必须对这个CSS进行注释标记.a:hover.tow｛visibility:visible；｝。

我想用JavaScript显示.2。你能帮我展示一下吗？悬停时显示两点。一节课？（我想要与使用.a:hover .two {visibility:visible;}一样的JavaScript结果）

我不知道你为什么要用JS来做这件事，因为它可以用CSS来做，但现在可以了：

CSS

.two {display:none;}

JS-

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

小提琴

//编辑

这是我最初的回答。我更改了它以缩短代码，但我会重新发布它：

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

首先必须在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>

问题已解决。我正在使用Javascript:

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

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

相关文章：