我会保持简短。我希望黑色div在mouseout
红色div时消失,而红色div现在不再那样了。现在的问题是,我也希望黑色div在鼠标悬停时仍然显示。
JsFiddle
答案 0 :(得分:2)
你可以像对待自己一样使用mouseout https://jsfiddle.net/xknc5x4h/
$('.red').mouseout(function() {
$('.black').hide(200);
})
更新:将代码更改为您的偏好设置:https://jsfiddle.net/2L5s7ude/
$('.red').hover(function() {
$('.black').show(200);
}, function() {
if(!$('.black').is(":hover")) {
$('.black').hide(200);
}
});
$('.black').mouseout(function (e) {
$(this).hide(200);
});
答案 1 :(得分:1)
只需使用它,黑色div将在悬停时出现并在mouseout上消失:
$('.red').hover(function() {
$('.black').show(200);
}, function() {
$('.black').hide(200);
});
答案 2 :(得分:0)
您可以使用mouseout以下代码。
$('.red').hover(function() {
$('.black').show(200);
}, function() {
$('.black').hover(function() {
$('.red').trigger('hover');
$('.black').show(200);
}, function() {
$('.red').off('hover');
$('.black').hide(200);
});
});

.red,
.black,
.green {
height: 4rem;
width:10rem;
line-height: 4rem;
color: white;
text-align: center;
}
.red {
background: red;
}
.black {
display: none;
background: #333;
}
.green {
background: green;
}

<div class="red">
Hover me
</div>
<div class="black">
Its me
</div>
<div class="green">
Green
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
&#13;
答案 3 :(得分:0)
这就像css问题我快速修复 你可以尝试
https://jsfiddle.net/qc1rvsp0/4/
$( ".red" ).hover(
function() {
$('.black').show(200);
}, function() {
$('.black').hide(200);
}
);
&#13;
.wrapper {
width:10rem;
}
.red,
.black,
.green {
height: 4rem;
line-height: 4rem;
color: white;
text-align: center;
}
.red {
background: red;
}
.black {
display: none;
background: #333;
}
.green {
background: green;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="red">
Hover me
</div>
<div class="black">
Its me
</div>
<div class="green">
Green
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
&#13;
答案 4 :(得分:0)
您只需使用CSS,使用hover
伪类和+
选择器即可完成此操作。使用你的html结构:
<div class="red">Hover me</div>
<div class="black">Its me</div>
<div class="green">Green</div>
您可以使用下一个样式在红/黑悬停中隐藏/显示黑色:
.red:hover + .black {
display: block;
}
.black:hover {
display: block;
}
我已经修改了你的jsfiddle用于测试here。使用此选项,您可以避免导入jQuery,并使您的网站更轻松。使用css,如果需要,还可以添加一些效果,例如组合max-height和opacity