关于鼠标经过盒子显示消失问题

在页面中我们经常要用到当鼠标经过某一元素是,其他元素显示或者消失,有比较多的方法,但是有些细节需要注意。

现在需要当鼠标经过绿色盒子时,红色盒子显示出来。

代码如下:

<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写显示消失的盒子可以为任意盒子,不需要考虑盒子间的关系,灵活运用。




阅读更多
个人分类: js
上一篇消除inline-block产生的间隙
下一篇关于js面向对象的公有属性与私有属性的设置方法
想对作者说点什么? 我来说一句

纯css鼠标覆盖阴影文字效果

2016年07月21日 281KB 下载

没有更多推荐了,返回首页

关闭
关闭