mouseover / mouseout 用于多个元素但相同的图像

Posted 2023-05-08

【中文标题】mouseover / mouseout 用于多个元素但相同的图像

【英文标题】：mouseover / mouseout for multiple elements but the same image

【发布时间】：2014-11-25 07:53:15

【问题描述】：

我有两个问题...

(1) 我有一个图标，当我将鼠标悬停在 [类似于魔术线] 上时，我想出现在导航元素上方，但我不想在每个导航元素上方多次放置图标，我只想放置一次图标并在悬停时重复？

(2) 说到 jQuery，我仍然是个菜鸟，所以我的代码对我来说是一种渴望。请在下面找到我想缩短的代码，如果我能得到一些反馈和建议，那就太好了。谢谢。

$(document).ready(function()
    $("#sheep1, #sheep2, #sheep3, #sheep4, #sheep5").hide();

    $("#about").mouseover(function()
        $("#sheep1").show();
    );

    $("#about").mouseout(function()
        $("#sheep1").hide();
    );

    $("#graphics").mouseover(function()
        $("#sheep2").show();
    );

    $("#graphics").mouseout(function()
        $("#sheep2").hide();
    );

    $("#web").mouseover(function()
        $("#sheep3").show();
    );

    $("#web").mouseout(function()
        $("#sheep3").hide();
    );

    $("#blog").mouseover(function()
        $("#sheep4").show();
    );

    $("#blog").mouseout(function()
        $("#sheep4").hide();
    );

    $("#contact").mouseover(function()
        $("#sheep5").show();
    );

    $("#contact").mouseout(function()
        $("#sheep5").hide();
    );
);

【问题讨论】：

首先，我会给图像一个通用类，以便您可以在单个选择器中附加事件（mouseenter mouseover、mouseleave mouseout）处理程序。

这些ID以sheep开头的元素是不是基本一样，只是重复了？

【参考方案1】：

如果你给你的元素一个 data-target 属性：

<div id="about" data-target="#sheep1">

然后在你的活动中你可以这样做：

$("#about, #graphics, #web, #blog")
  .on("mouseover", function(e) 
     var target = $(this).data("target");
     $(target).show();
  ).on("mouseout", function(e) 
     var target = $(this).data("target");
     $(target).hide();   
  );

这样，您可以一次附加到所有对象，每个对象都会影响正确的目标。

【参考方案2】：

既然只能使用 css，为什么还要使用 jquery？？

示例：

#about:hover #sheep1
   display:none;
​

更多信息Use :hover to modify the css of another class?

【参考方案3】：

为所有的羊添加一个类class='sheep' 将行添加到 css .sheep display:none; 或 jquery $('.sheep').hide(); 改变你的羊类来模仿悬停id：不是id='sheep1而是class='sheep aboutSheep' 为悬停元素添加一个类class='do_hover'

您的悬停功能：

$(".do_hover").hover(function()

  var theSheep = '.' + $(this).attr('id') + 'Sheep';
  $(theSheep).toggle();

);

【讨论】：

除非我没听懂，否则这不会创建多个共享同一个id 的元素吗？ 不是 id='sheep1 而是 id='aboutSheep'

我没有注意到对一只羊的多次引用。不用担心，只要把它变成一个类，而不是一个 id。我会更新我的答案。

这个答案更多的是通过思考如何有效地命名事物来思考如何最小化你的代码。