在页面中我们经常要用到当鼠标经过某一元素是,其他元素显示或者消失,有比较多的方法,但是有些细节需要注意。
现在需要当鼠标经过绿色盒子时,红色盒子显示出来。
代码如下:
<div id="box">
鼠标经过
<div id="box1">显示</div>
</div>
效果如下:
方法一:css中的hover(仅限于红色盒子为绿色盒子子元素时)
代码如下:
#box:hover #box1{
display: block;
}
上述方法所有浏览器均兼容。
方法二:js中的onmouseover,onmouseleave
代码如下:
var box = document.getElementById("box")
var box1 = document.getElementById("box1")
box.onmouseover = function () {
box1.style.display = "block";
}
box.onmouseleave = function () {
box1.style.display = "none"
}
以上方法所有浏览器均兼容。
方法三:js中的onmouseenter,onmouseout
代码如下:
var box = document.getElementById("box")
var box1 = document.getElementById("box1")
box.onmouseenter = function () {
box1.style.display = "block";
}
box.onmouseout = function () {
box1.style.display = "none"
}
所有浏览器均兼容。
方法四:jQuery中的hover
代码如下:
$('#box').hover(function () {
$('#box1').show()
}, function () {
$('#box1').hide()
})
以上IE6、7、8不兼容
用js写显示消失的盒子可以为任意盒子,不需要考虑盒子间的关系,灵活运用。