Question

我有2个问题......

（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();
    });
});

Answer 1

如果为元素提供数据目标属性：

<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();   
  });

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

Answer 2

为所有绵羊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();

});

Answer 3

为什么在只使用css时使用jquery？

示例：

#about:hover #sheep1{
   display:none;
}

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

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

3 个答案: