关于单击或悬停功能

About click or hover functions

本文关键字：悬停 功能 单击 于单击      更新时间：2023-09-26

我们有一个代码，当您单击图标时，会出现一个div。我们想让它在悬停在图标上时出现，而不是点击。我们该怎么做？

这段代码在Wordpress主题的页脚部分。它需要改变才能像我想的那样工作。代码是这样的：

        <script type="text/javascript">
			$(document).ready(function(){
				var searchi = 0;
				$("#social-medias").click(function(){
					$("#medias-icons").slideToggle("fast");
                    if ( searchi == 0 ){
                        $(this).addClass("searchAct1");
                        searchi = 1; 
                    }else{
                        $(this).removeClass("searchAct1");
                        searchi = 0;
                    }
				});
			});
		</script>

使用.mouseover(function() { //code here; }); 而不是.click(function() { //code here; });

然后使用.mouseout(function() { //reverse code here; }); 来撤消

我看到这些元素是嵌套的，所以您可以只使用样式来实现这一点

.a{
color:blue;
}
.a .b{
    color:red;
}
.a:hover .b{
    color:green;

HTML:

<div class="a">
    a
    <div class="b">
        b
    </div>
</div>

根据本例，当光标位于其父级（悬停）上时，您可以覆盖嵌套类的行为（例如display:none/block）

相关文章：