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

最新推荐文章于 2024-09-02 09:12:21 发布

原创最新推荐文章于 2024-09-02 09:12:21 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了使用CSS和JS实现鼠标悬停时显示或隐藏页面元素的四种方法，包括CSS hover伪类、纯JS和jQuery等，并对比了它们在不同浏览器中的兼容性。

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

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

代码如下：

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