1

我正在尝试为鼠标悬停函数压缩重复 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;
}

谢谢你们的时间。

4

3 回答 3

4

修改您的 DOM 以便在按钮及其元素之间存在语义关系，然后您可以使用单个事件处理程序。您可以通过将目标元素的 放入链接的<a>标签中轻松地做到这一点：idhref

    <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>悬停的正确元素。

于 2013-04-22T18:12:21.073 回答
0

在要悬停的元素上使用 adata-attribute并将要显示的元素的选择器设置为值。例如

<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为更合适的选择器。

于 2013-04-22T18:20:23.493 回答
0

微薄响应的替代方法可能是显示 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(); })
    );

您可以将基本 display:none 应用于所有 .hidden 元素。

于 2013-04-22T18:22:32.570 回答