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>立即选择正确的元素。

Answer 2

对要悬停的元素使用data-attribute，并将值设置为要显示的元素的选择器。 e.g。

<div class="imgcont">
    <a id="a" href="#" data-target="#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>

然后JS非常简单。

$('[data-target]').hover(

function () {
   $( $(this).attr('data-target')).show()
},

function () {
    $($(this).attr('data-target')).hide()
});

但你也可以只用css做这件事：

.imgcont:hover + div  { display:none;}

您是否应该将div更改为更合适的选择器。

Answer 3

meager的回应的替代方法可能是显示a元素的父div的兄弟姐妹......

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

 //in your javascript
    $(".hoverimage").hover(
      function () { $(this).parent().siblings().show(); }),
      function () { $(this).parent().siblings().hide(); })
    );

您可以对所有.hidden元素应用基本显示：none。

冷凝重复的.mouseover功能

3 个答案: