jQuery howto : 悬停链接 div 淡入，鼠标移出链接或 div ， div 淡出

Question

好的，请考虑以下情况。

我有 2 个链接，都在

标签包含在标签中。

基本上，将鼠标悬停在链接 A 上会触发一个盒子的动画，在该盒子下方淡入淡出，并且在链接 A 的 mouseout 和盒子的 mouseOut 上，盒子淡出。

与链接 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()时使用了它。