利用Jquey.hover来实现 鼠标移入出现删除按钮，鼠标移出删除消失

Html代码

<div class="box">
<div class="bmbox" onclick="$('.box:first').remove();>删除</div>
<img src="xxxx" style="border:none; margin:10px auto;display:block;" id="imgBanner"/>
</div>

CSS代码

<style type="text/css">
.box {
width: 100%;
height: 200px;
position: relative;
cursor: pointer;
}

.bmbox {
width: 100%;
height: 30px;
background: black;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
display: none;
font: 12px/30px "宋体" bold;
color: white;
text-align: center;
}
</style>

JS代码

$(".box:first").hover(
function () {
$('.bmbox:first').show(500);
},
function () {
$('.bmbox:first').hide(500);
});

 

小结：我们可以用onmouseover,onmouseout实现这个效果，但是当我们将鼠标停留在最外面的box时，用来删除的bmbox会出现，这时将鼠标移到bmbox去点击删除时，这时候会触发box的onmouseout事件。

而jquery.hover(func1,func2)正好为我们解决了这点。

官方是这样解释的：

hover会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。