Question

好的，请考虑以下情况。

我有2个链接，两个都在标记中包含的

标记中。

基本上，将鼠标悬停在链接A上将触发fadeIn下面的框的动画，并在框的链接A和mouseOut的mouseout上触发框fadeOut。

与链接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>

它无法正常工作。鼠标离开链接后，框会逐渐淡出。我希望盒子保持可见，直到鼠标离开链接和/或盒子......

Answer 1

使用以下jQuery：

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

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

请参阅此live example

Answer 2

$(".linkA").on('hover', function(e) {
    if(e.type == 'mouseenter') {
      $("#boxA").fadeIn('fast');
    } else {
      $("#boxA").fadeOut('fast');
    }
});

使用一个悬停，不需要为每个链接编写单独的悬停语句。

如果您的链接只有一个类，那么可以使用如下所示。

$(".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');
    }
});

<强> DEMO

注意

您不需要display: block，因为jQuery在.fadeIn()时使用了它。

jQuery howto：悬停链接div fadeIn，mouseout链接或div，div fadeOut

2 个答案:

如果您的链接只有一个类，那么可以使用如下所示。

注意