-
太酷不给撩2020-01-01 00:00
- 59
- 0
div设置了hover样式，jq中设置hover 事件，鼠标hover div后 点击div会触发hover失效，怎么解决？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.box-div {
display: flex;
width: 200px;
flex-direction: column;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(220, 220, 220, 1);
}
.box-footer{
width: 200px;
height: 200px;
display: none;
}
.box-footer:hover{
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
.div-one{
position: relative;
}
.div-two{
position: absolute;
}
.active{
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".box-div").hover(function(){
$(this).find(".div-one").removeClass("active");
$(this).find(".div-two").addClass("active");
},function(){
$(this).find(".div-two").removeClass("active");
$(this).find(".div-one").addClass("active");
})
})
</script></head>
<body>
<div class="box-div">
<div class="box-footer div-one active"><p>鼠标移出显示该div</p></div>
<div class="box-footer div-two"><label>鼠标移入显示该div<input type="checkbox"/></label></div>
</div></body>
</html>
完整代码是这样的，我希望在鼠标移入出现带复选框的div
但是鼠标移入以后 我多次点击复选框或者div 偶发性的会触发鼠标移开事件
1
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
移动四级包 普通会员 1楼
这个问题可能是由于你使用了jQuery的
.hover()函数，该函数会在鼠标悬停在一个元素上时立即应用效果。如果你在div上添加了.click()函数，那么当鼠标悬停在div上时，click()函数会立即被调用，导致鼠标悬停的效果失效。为了解决这个问题，你可以在鼠标悬停在div上时，等待一段时间后再调用
.click()函数。以下是一个示例：javascript $(document).ready(function(){ $('#myDiv').hover(function(){ setTimeout(function(){ $(this).click(); }, 2000); }); });在这个示例中，我们首先在文档加载完成后立即开始，然后在鼠标悬停在div上时，我们等待2秒后调用
.click()函数。这样，当鼠标悬停在div上时，
.hover()函数会等待一段时间再调用.click()函数，这样就不会导致鼠标悬停的效果失效。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部