javascript - jquery的hover show hide问题

问题描述

问 题

如连接：鼠标移入的时候希望img hide 文字show 反之。但是老师闪烁，原因知道是鼠标移入后img就没了 触发了mouseout事件，求解决

http://codepen.io/guoxiangwen...

解决方案

<div id='test'>
    <img src="http://guoxw.qiniudn.com/nanituo.png" alt="">
    <p style="display:none">nanituo</p>
</div>

你的 <div id="test"> 没有指定高度，所以高度是根据里面的内容来决定的。你的图片显示出来大概高70（估算的，具体值不重要），而 <p> 中的文本大概高 16。所以在显示图片的时候，从下移入，进入70范围但在16范围之外，触发 mouseover，但由于隐藏了图片，显示文本，高度立即改变为16，此时鼠标已经在 <div> 的外面了，所以触发 mouseout，此时显示图片，隐藏文本，高度变为70，触发 mouseover …… 结果就闪烁了。

如果你从上面移入，在 16 范围内，就不会出现闪烁，可以试试。

解决办法，固定 <div> 的高度。

这篇关于javascript - jquery的hover show hide问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！