jQuery howto : hover a link the div fadeIn, mouseout 链接或 div 、 div fadeOut

Question

好的，请考虑以下场景。

我有 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>

它只是无法正常工作。一旦鼠标离开链接，这些框就会消失。我希望该框保持可见，直到鼠标离开链接和/或框...

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