极客观点
项目管理
HarmonyOS
如连接：鼠标移入的时候希望img hide 文字show 反之。但是老师闪烁，原因知道是鼠标移入后img就没了 触发了mouseout事件，求解决
原因是你没有对#test进行约束，可以添加css：
#test{
width: 100px;
height: 100px;
border: 1px solid black;
}试试。
PS: 黑线主要是易于找到#test(可有可无)，
使用mouseleave和mousenter这两个事件代替mouseout和mouseover事件
原因:
因为mouseover事件是必然冒泡的，一旦子元素mouseover了，本元素必然mouseover（除非子元素上禁止冒泡了）。
而鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mouseenter事件。即：一旦进入，在子元素间的mouseenter不算是在本元素上的mouseenter。
你运行看下
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.warp {
width: 1000px;
flex-wrap: wrap;
border: 1px solid #555;
display: flex;
padding: 20px;
}
.item {
margin: 0;
display: flex;
padding: 10px;
width: 178px;
height: 178px;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
/*border: 1px solid green;*/
}
#test
{
width:100px;
height:100px;
}
img {
width: 100px;
}
p {
width:100px;
height:100px;
}
</style>
<body>
<div id='test'>
<img src="http://guoxw.qiniudn.com/nanituo.png" alt="">
<p style="display:none">nanituo</p>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
(function($) {
$('img').hover(function() {
$('img').hide();
$('p').show();
}, function(e) {
e.prevenDefault()
})
$('p').hover(function(e) {
e.prevenDefault()
}, function(){
$('img').show();
$('p').hide();
})
})($)
</script>
</body>
</html>撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.1k 阅读
为什么在谷歌浏览器中 'a' == ['a'] 返回 true？
'a' == ['a'] 谷歌浏览器返回了true 是为什么16 回答3k 阅读
vue项目如何在初始化之前跳转外部页面？
vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。5 回答4.8k 阅读✓ 已解决
js如何控制移动端overflow:scroll容器滑动的最大速度？
{代码...} demo在这：[链接]在移动端滑动一下这个.box区域,稍微一用力就到头了，如果我想用js去控制他滑动的最大速度该怎么去处理？4 回答3.1k 阅读✓ 已解决
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答2.7k 阅读✓ 已解决
为什么会出现CORS error？
先登录成功了。再次调用，就出现了CORS error在Login页调用这个接口就是正常的，换一个页面调用这个接口就出现了跨域问题。我把这段代码注释以后就正常了。3 回答2.3k 阅读✓ 已解决
请问一下，如何理解reduce函数呢？
但是reduce是减少的意思，请问如何形象化地理解reduce呢？ 我们可不可以理解：把参数2一个一个地带入到参数1（函数）中执行，这样也就慢慢减少呢？3 回答2.1k 阅读✓ 已解决
你的
<div id="test">没有指定高度，所以高度是根据里面的内容来决定的。你的图片显示出来大概高70（估算的，具体值不重要），而<p>中的文本大概高 16。所以在显示图片的时候，从下移入，进入70范围但在16范围之外，触发mouseover，但由于隐藏了图片，显示文本，高度立即改变为16，此时鼠标已经在<div>的外面了，所以触发mouseout，此时显示图片，隐藏文本，高度变为70，触发mouseover…… 结果就闪烁了。如果你从上面移入，在 16 范围内，就不会出现闪烁，可以试试。
解决办法，固定
<div>的高度。