jquery - jquery .hover() 对不同元素的效果相同

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/

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

谢谢

​</p>

Answer 1

h4不是 element 的子元素，并且 your和 youra之间没有联系。ah4

试着给他们一个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