利用Jquey.hover来实现 鼠标移入出现删除按钮,鼠标移出删除消失
2017-02-09 11:13
597 查看
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事件的一个常见错误)。
<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事件的一个常见错误)。
相关文章推荐
- js的面向对象(实现鼠标移入移出右下角出现备注)
- <li>的鼠标移入移出事件和点击事件分别实现为当前li添加样式,删除其他li样式
- 利用css3和js原生实现鼠标移入移出模块透明度的变化
- DataGrid中实现鼠标移入移出变色,且选择再变色,取消选择恢复原色,且原色隔行不一样的代码...
- 当鼠标移到上面字消失,移出又出现的效果代码
- Jquery实现鼠标移上弹出提示框,移出消失
- 实现DataGrid的某一行随着鼠标的移入移出而改变颜色
- 实现DataGrid的某一行随着鼠标的移入移出而改变颜色
- GridView实现鼠标移动是,动态显示‘编辑、删除、查看’等命令按钮
- VC下利用Picture控件实现png图片按钮(鼠标初始、按下、松开、获得焦点四种状态)
- 用jq实现鼠标移入按钮背景渐变其他的背景效果
- jQuery实例--实现斑马线效果包括鼠标的移入移出变色
- css3实现图片遮罩效果鼠标hover以后出现文字
- 如何能实现文本框默认值,鼠标单击后消失,当鼠标焦点消失默认值又出现
- ASP.Net 中实现GridView鼠标的移入与移出事件
- 还有如此实现方法,没试用过,mouseEntered一个按钮的时候如何让他自动显示按钮的注释信息在一个小的注释框中??鼠标移走又小的注释框又自动消失??
- Jquery实现鼠标移上弹出提示框,移出消失
- VC下利用Picture控件实现png图片按钮(鼠标初始、按下、松开、获得焦点四种状态)
- Android ListView实现单击item出现删除按钮以及滑动出现删除按钮
- js实现鼠标放上按钮出现提示