Jquery 压缩.鼠标悬停函数

我试图压缩mouseover函数的重复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

---

谢谢大家的时间。

修改DOM，使按钮及其元素之间具有语义关系，然后您可以使用单个事件处理程序。通过将目标元素的

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>

---

在处理程序中，

$（this）.attr（“href”）

返回

“#imgdesc”

，允许您立即选择悬停

所基于的正确元素。

修改DOM，使按钮及其元素之间存在语义关系，然后您可以使用单个事件处理程序。通过将目标元素的

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>

---

在处理程序中，

$（this）.attr（“href”）

返回

“#imgdesc”

，允许您立即选择正确的悬停元素。

对要悬停的元素使用

数据属性

，并将选择器设置为要显示的元素的值。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>

但您也可以仅使用css来实现：

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

---

您可能应该将

div

更改为更合适的选择器。

对要悬停的元素使用

数据属性

，并将要显示的元素的选择器设置为值。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>

但您也可以仅使用css来实现：

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

---

您可能应该将

div

更改为更合适的选择器。

米格响应的另一种选择可能是显示元素的父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(); })
    );

标题

名称：示例
名称：示例
//在javascript中
$（“.hoverimage”）.hover(
函数（）{$（this.parent（）.sides（）.show（）；}），
函数（）{$（this.parent（）.sides（）.hide（）；}）
);

---

可以对所有隐藏元素应用基本显示：无

米格尔回答的另一种选择是显示元素的父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(); })
    );

标题

名称：示例
名称：示例
//在javascript中
$（“.hoverimage”）.hover(
函数（）{$（this.parent（）.sides（）.show（）；}），
函数（）{$（this.parent（）.sides（）.hide（）；}）
);

---

可以对所有隐藏元素应用基本显示：无

DOM遍历肯定比简单地选择正确的元素慢，语义上也不太有效。DOM遍历肯定比简单地选择正确的元素慢，语义上也不太有效。这并不是说我不同意这是一个好主意，但如果我计划通过该href链接某个东西呢？本页面的总体计划是将光标悬停在左侧弹出的图像上，以获取其描述。然后按照其他答案的建议使用数据属性。这并不是说我不同意这是一个好主意，而是如果我计划通过该href链接某个内容呢？此页面的总体计划是将光标悬停在左侧弹出的图像上，以获取其描述。然后使用其他答案建议的数据属性。因此，假设我们有数据目标=“#a”数据目标=“#b”数据目标=“#c”因为每个都需要一个唯一的id来标识其目标，所以会增加css div####a、#b、#c{display:none；}的数量。那么有没有一种方法可以只使用一个数据目标、一个id和一个css div#？如果您的id或类有一个模式，例如

#hiding-a

、

#hiding-b

等。您可以通过

[id^='higing-']

或

[id$='higing-']

但是不要做得太过分。更多关于CSS属性选择器的信息，如果我“做得太过分”我会破坏互联网吗？：D但是，确实如此。我可能会使用这种方法十几次半（可能更多）。不用担心，它只是一个选择器，只要它们可读且可自我扩展，您就可以了。但是如果您在一个月内看到它，使用类似于

[data-f$='-b']

的东西肯定会让您感到困惑。因此，假设我们有data target=“#a”data target=“#b”data target=“#c”因为每个都需要一个唯一的id来标识其目标，所以会增加css div####a、#b、#c{display:none；}的数量。那么有没有一种方法可以只使用一个数据目标、一个id和一个css div#？如果您的id或类有一个模式，例如

#hiding-a

、

#hiding-b

等。您可以通过

[id^='higing-']

或

[id$='higing-']

但是不要做得太过分。更多关于CSS属性选择器的信息，如果我“做得太过分”我会破坏互联网吗？：D但是，确实如此。我可能会使用这种方法十几次半（可能更多）。不用担心，它只是一个选择器，只要它们可读且可自扩展，您就可以了。但是如果您在一个月内看到它，使用类似于

[data-f$='-b']

的东西肯定会让您感到困惑。