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

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

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

代码如下:

<div id="box">
    鼠标经过
    <div id="box1">显示</div>
</div>

效果如下:


方法一:css中的hover(仅限于红色盒子为绿色盒子子元素时)

代码如下:

#box:hover #box1{
    display: block;
}

上述方法所有浏览器均兼容。

方法二:js中的onmouseover,onmouseleave

代码如下:

<script>
    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

代码如下:

<script>
    var box = document.getElementById("box")
    var box1 = document.getElementById("box1")
    box.onmouseenter = function () {
        box1.style.display = "block";
    }
    box.onmouseout = function () {
        box1.style.display = "none"
    }
</script>

所有浏览器均兼容。

方法四:jQuery中的hover

代码如下:

<script>
    $('#box').hover(function () {
        $('#box1').show()
    }, function () {
        $('#box1').hide()
    })
</script>

以上IE6、7、8不兼容

用js写显示消失的盒子可以为任意盒子,不需要考虑盒子间的关系,灵活运用。




阅读更多
个人分类: js
想对作者说点什么? 我来说一句

js鼠标经过显示隐藏层效果

2009年06月05日 811B 下载

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

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭