0

私はこのシナリオを持っています：

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>

4

4 に答える 4

1

は要素の子ではなく、あなたとあなたの間に関係はありh4ません。aah4

ID多分彼らに正しいものをターゲットにするために何かを与えるようにしてください、h4さもなければあなたはそのような何かをすることができます...

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

ここでは、ホバリングとを改善したJsFiddle.toggleClass()を使用しています。

于 2012-09-14T11:00:46.270 に答える
0

上記のクエリに対して完全なビンを作成しました。こちらがデモリンクです...

デモ： 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

于 2012-09-14T11:45:25.417 に答える
0

あなたはすべきでは.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/

于 2012-09-14T10:54:41.973 に答える
0

アンカーリンクのターゲットを見つけるには、いくつかのデータが必要です。アンカーリンクには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/

于 2012-09-14T10:57:50.227 に答える