我试图让工具提示在我没有将鼠标悬停在 div 上时消失。但是,当我将鼠标悬停在下一个 div 上时,上一个 div 中的工具提示会再次显示。有什么方法可以在我离开悬停时立即停止显示工具提示吗?我尝试创建一个功能,当我将鼠标悬停在工具顶部上时,它会消失,但它不起作用。我发布了下面的代码来演示我的问题。非常感谢您的帮助。
$(".photos").hover(
function(){
$(".tooltip",this).fadeIn();
},
function(){
$(".tooltip",this).fadeOut();
}
);
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
width:80%;
margin:auto;
text-align:center;
}
.photos{
width:200px;
height:200px;
background-color:red;
float:left;
margin:20px 0 0 40px;
position:relative;
}
.tooltip{
content:"";
position:absolute;
width:200px;
height:100%;
background-color:gray;
color:black;
z-index:1;
left:103%;
display:none;
}
.tooltip:after{
content:"";
position:absolute;
color:black;
border-width:5px;
border-style:solid;
top:45%;
right:100%;
border-color:transparent rgba(0,0,0,.6) transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
</div>
最佳答案
添加此样式:
.tooltip {
pointer-events: none;
}
这将阻止鼠标与工具提示交互,否则会重新触发其父 div
上的悬停事件。
片段:
$(".photos").hover(
function() {
$('.tooltip', this).fadeIn();
},
function() {
$('.tooltip', this).fadeOut();
}
);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
text-align: center;
}
.photos {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin: 20px 0 0 40px;
position: relative;
}
.tooltip {
content: "";
position: absolute;
width: 200px;
height: 100%;
background-color: gray;
color: black;
z-index: 1;
pointer-events: none;
left: 103%;
display: none;
}
.tooltip:after {
content: "";
position: absolute;
color: black;
border-width: 5px;
border-style: solid;
top: 45%;
right: 100%;
border-color: transparent rgba(0, 0, 0, .6) transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
<div class="photos"><span class="tooltip">Hello There</span></div>
</div>
关于jquery - 如何让 jQuery 在停止悬停 div 后不显示工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48104792/