Question

我有这种情况：

HTML：

<a>text</a>
<a>text</a>
<a>text</a>
<a>text</a>

<h4>hi there</h4>
<h4>hi there</h4>
<h4>hi there</h4>
<h4>hi there</h4>

javascript：

$("h4").hide();
$('a').hover(function () {
  $("h4").addClass('hover').fadeIn(300);
},
function () {
  $("h4").stop(0,0)
     .queue(function(){ $("h4").removeClass('hover').fadeOut(300).dequeue() });
});

的CSS：

.hover {
    background-color: yellow;
}

这是jsfiddle http://jsfiddle.net/zS6ex/280/

我希望当我将鼠标悬停在单个上时，不会显示所有

感谢

Answer 1

h4不是a元素的子元素，您的a和h4之间没有关联。

尝试给他们一个ID或其他东西来定位正确的h4，否则你可以做那样的事情......

$('a').on('click', function() {
    var i = $(this).index();
    $('h4').eq(i).addClass('hover');            
});

这是一个 JsFiddle ，在悬停和.toggleClass()上有所改进。

Answer 2

您不应该.fadeIn()和.fadeOut。它在ViewPort中无法访问。使用opacity和动画。

$("h4").css("opacity", 0);
$("h4").hover(function(){
    $(this).addClass("hover").animate({opacity: 1}, 1000);
}, function(){
    $(this).removeClass("hover").animate({opacity: 0}, 1000);
});

小提琴：http://jsfiddle.net/zS6ex/288/

Answer 3

您需要一些数据才能找到锚链接的目标。请注意，锚链接应具有href属性。

<a href='#first'>text</a>
<a href='#second'>text</a>
<a href='#third'>text</a>
<a href='#fourth'>text</a>

<h4 id='first'>hi there</h4>
<h4 id='second'>hi there</h4>
<h4 id='third'>hi there</h4>
<h4 id='fourth'>hi there</h4>

$('a').hover(function() {
    $(this.hash).addClass('hover').stop().fadeIn(300);
}, function() {
    $(this.hash).stop().fadeOut(300).removeClass('hover')
});

http://jsfiddle.net/CywgQ/

Answer 4

我为上面的查询做了完整的垃圾箱。这是演示链接...

演示： http://codebins.com/bin/4ldqp77

<强> HTML

<div id="panel">
  <a href="javascript:void(0);">
    Link-1
  </a>
  <a href="javascript:void(0);">
    Link-2
  </a>
  <a href="javascript:void(0);">
    Link-3
  </a>
  <a href="javascript:void(0);">
    Link-4
  </a>
  <h4>
    hi there...Header 1
  </h4>
  <h4>
    hi there...Header 2
  </h4>
  <h4>
    hi there...Header 3
  </h4>
  <h4>
    hi there...Header 4
  </h4>
</div>

<强> JQuery的

$(function() {
    $("h4").fadeOut();
    $('a').hover(function() {
        $("h4:eq(" + $(this).index() + ")").addClass('hover').fadeIn(300);
    }, function() {
        $("h4:eq(" + $(this).index() + ")").removeClass('hover').fadeOut(300);
    });
});

<强> CSS

a{
  display:inline-block;
  margin:10px;
  border:1px solid #000;
  background:#3A3A3A;
  color:#fff;
  text-decoration:none;
  padding:5px;
  border-radius: 5px;
}
a:hover{
  background:#9C9C9C;
  text-decoration:underline;
  color:#262626;
}

h4{
  display:block;
  border:1px solid #4455bd;
  margin-left:10px;

  width:300px;
  padding:2px;
  background:#a3c4fd;
}
h4.hover{
  background:#ffdf88;
}

演示： http://codebins.com/bin/4ldqp77

如果你想在不使用fadeOut（）的情况下检查效果，请检查演示链接上的jQuery更改，如下所示。

演示： http://codebins.com/bin/4ldqp77/2

jquery .hover（）对不同元素的效果相同

4 个答案:

小提琴：http://jsfiddle.net/zS6ex/288/