jquery - 压缩重复的 .mouseover 功能

Question

我正在尝试压缩鼠标悬停功能的重复 jQuery 数量。

这似乎是一项非常基本的任务，但我在尝试解决这个问题时花了很多时间。

我试图做到这一点，以便当鼠标悬停在链接图像之一上时，相应 div id imgdesc、imgdesc2 和 imgdesc3 之一中的副本变得可见。

jQuery

$(document).ready(function(){
$("#a").mouseover(function() { $("#imgdesc").css('visibility','visible'); });
$("#a").mouseout(function() { $("#imgdesc").css('visibility','hidden'); });
$("#b").mouseover(function() { $("#imgdesc2").css('visibility','visible'); });
$("#b").mouseout(function() { $("#imgdesc2").css('visibility','hidden'); });
$("#c").mouseover(function() { $("#imgdesc3").css('visibility','visible'); });
$("#c").mouseout(function() { $("#imgdesc3").css('visibility','hidden'); });
});

HTML

<div class="r_column">
    <div id="bgimg1">
        <div class="imgcont">
            <a id="a" href="#">
                <img src="pic/blackbox.jpg" alt="">
            </a>
        </div>
        <div id="imgdesc">
            <h1>Title</h1><br>
            <p class="subs">Name: Example</p><br>
            <p class="subs">Name: Example</p>
        </div>
    </div>
    <div id="bgimg1">
        <div class="imgcont">
            <a id="b" href="#">
                <img src="pic/blackbox.jpg" alt="">
            </a>
        </div>
        <div id="imgdesc2">
            <h1>Title</h1><br>
            <p class="subs">Name: Example</p><br>
            <p class="subs">Name: Example</p>
        </div>
    </div>
    <div id="bgimg1">
        <div class="imgcont">
            <a id="c" href="#">
                <img src="pic/blackbox.jpg" alt="">
            </a>
        </div>
        <div id="imgdesc3">
            <h1>Title</h1><br>
            <p class="subs">Name: Example</p><br>
            <p class="subs">Name: Example</p>
        </div>
    </div>
</div>

CSS

div#bgimg1{
    float: right;
    position: relative;
    height: 212px;
    display: inline-block;
}


.r_column{
    display:block;
    position:relative;
    width:904px;
    float: right;
}

.imgcont{
    float: right;
    width: 461px;
    margin: 10px 12px 10px 10px;
    position: relative;
}

div#imgdesc,div#imgdesc2,div#imgdesc3{
visibility:hidden;
text-align:right;
float:right;
width:395px;
margin: 10px 0px 10px 10px;
position: relative;
}

谢谢你们的宝贵时间。

Answer 1

修改您的 DOM，以便按钮及其元素之间存在语义关系，然后您可以使用单个事件处理程序。您可以使用 <a> 轻松完成此操作通过放置 id 来标记将目标元素放入 href链接:

    <div class="imgcont">
        <a id="a" href="#imgdesc">
            <img src="pic/blackbox.jpg" alt="">
        </a>
    </div>
    <div id="imgdesc">
        <h1>Title</h1><br>
        <p class="subs">Name: Example</p><br>
        <p class="subs">Name: Example</p>
    </div>

您可以使用 hover 来简化事件处理而不是mouseover和mouseout :

$("a").hover(
  function () { $($(this).attr("href")).show(); }),
  function () { $($(this).attr("href")).hide(); })
);

在处理程序中，$(this).attr("href")返回"#imgdesc" ，允许您立即根据 <a> 选择正确的元素正在悬停。