Question

JQUERY鼠标移动显示相应内容

HTML代码:
<em class="same-name">
<i><img src="鼠标移动到这张图片显示span内容.jpg" /></i>
<span><img src="小图标3.jpg" />我是显示内容1</span>
</em>
<em class="same-name">
<i><img src="鼠标移动到这张图片显示span内容.jpg" /></i>
<span><img src="小图标3.jpg" />我是显示内容2</span>
</em>
<em class="same-name">
<i><img src="鼠标移动到这张图片显示span内容.jpg" /></i>
<span><img src="小图标3.jpg" />我是显示内容3</span>
</em>

鼠标移动到指定标签 <i> 里的图片上，显示相应 <span> 里的内容，当相应 <span> 显示后鼠标移动到 <span> 标签上一样显示不会消失，移开隐藏。请问如何用JQUERY实现，求解，先谢谢啦！~

Answer 1

我猜会继续提问

<script type="text/javascript">
    var t;
    $('.same-name span').animate({top: "0px", opacity: "0"});
    $('.same-name i img').hover(function(){
            //ImgToggle($(this),true);
            $(this).parent().parent().children("span").stop().animate({top: "-16px", opacity: "1"})
        },function(){
            t=setTimeout("ImgToggle("+$(this).parent().parent().index()+")",400);
            console.log($(this).parent().parent().index());
        }
    )
    $('.same-name span').hover(function(){clearTimeout(t)},function(){
        $(this).stop().animate({top: "0px", opacity: "0"});
    })
    function ImgToggle(i){
        $('.same-name').parent().children().eq(i).find('span').animate({top: "0px", opacity: "0"});
    } 
</script>

Answer 2

<script src="jQuery/jquery.js"></script><!--请留意JQ引用位置-->
<!--脚本部分开始-->
<script language="javascript">
$(document).ready(function(){
//第一行，鼠标移到图片，span中的图片显示
$("img#i1").mouseover(function(){$("img#span1").show()})
//第二行，鼠标离开图片，span中的图片隐藏，函数延迟执行1秒
$("img#i1").mouseout(function(){t =setTimeout("$('img#span1').hide()",1000)})
//第三行，鼠标移动到span中的图片，清除定时器，正常显示
$("img#span1").mouseover(function(){clearTimeout(t);$("img#span1").show()})
//第四行，鼠标离开span中的图片，正常隐藏
$("img#span1").mouseout(function(){$("img#span1").hide()})
})
</script>
<!--脚本部分结束-->
<!--HTML部分开始-->
<em class="same-name">
<i><img id="i1" src="i图片.JPG"/></i>
<span><img id="span1" src="span图片.JPG" style="display:none"/>我是显示内容1</span>
</em>
<!--HTML部分结束-->

<!--解释：函数延迟1秒的原因，是为了用户有时间把鼠标移动到span中的图片上继续操作，如不使用延迟函数，则会产生立即消失的效果-->