2

次のシナリオを検討してください。

私は2つのリンクを持っています、両方とも入っています

  • タグに含まれるタグ。

    基本的に、リンク A にカーソルを合わせると、その下のボックスのアニメーションがトリガーされ、リンク A のマウスアウトとボックスのマウスアウトで、ボックスのフェードアウトがトリガーされます。

    リンク B と同じように、別のボックスのアニメーションをトリガーします。

    リンクとボックスの間で発生する PHP 条件がいくつかあります。

    <ul class="links">
<li class="linkA"><a><span>Hover here to see BOX A</span></a></li>
<li class="linkB"><a><span>Hover me to see BOX B</span></a></li>
</ul>


<?php if ( is_user_logged_in() ) { ?>
<div id="boxA">
Some content here for Box A
</div>
<?;}

else { ?>
<div id="boxB" >
Content for Box B
</div>
<?php }
?> 

<style>
ul,
li {list-type:none; display:inline}
li.linkA a {display:block; width:20px; height:20px; background:url(my_image_A.png) no-repeat;}
li .linkB a {display:block; width:20px; height:20px; background:url(my_image_B.png) no-repeat;}

boxA,
boxB {width:300px;height:180px;border:4px solid #00aaff;background:yellow; display: none;}
<script>

jQuery(".linkA").hover(function() {
jQuery("#boxA").fadeIn('fast').css('display', 'block');
 }, function() {
jQuery("#boxA").fadeOut('fast')
});
</script>

    正しく動作しません。マウスがリンクから離れるとすぐにボックスがフェードアウトします。マウスがリンクやボックスから離れるまでボックスを表示したままにしたい...

    • 4

    2 に答える 2

    1

    次の jQuery を使用します。

    $(".linkA").mouseover(function() {
    $("#boxA").fadeIn('fast');
}).mouseout(function () {
    $("#boxA").fadeOut('fast');
});​

$(".linkB").mouseover(function() {
    $("#boxB").fadeIn('fast');
}).mouseout(function () {
    $("#boxB").fadeOut('fast');
});​

    この実例を見る

    于 2012-06-08T15:38:54.497 に答える
    0 
    $(".linkA").on('hover', function(e) {
    if(e.type == 'mouseenter') {
      $("#boxA").fadeIn('fast');
    } else {
      $("#boxA").fadeOut('fast');
    }
});​

    1つのホバーで実行し、リンクごとに個別のホバーステートメントを記述する必要はありません。

    リンクにクラスが1つしかない場合は、以下のように使用できます。

    $(".linkA, .linkB").on('hover', function(e) {
    if(e.type == 'mouseenter') {
      $("#box" + this.className.replace('link','')).fadeIn('fast');
    } else {
      $("#box" + this.className.replace('link', '')).fadeOut('fast');
    }
});​

    デモ

    ノート

    display: blockjQueryがこれを使用したため、必要ありません.fadeIn()。

    于 2012-06-08T15:41:49.777 に答える