鼠标悬浮时，蒙版显示；否则，蒙版消失

最新推荐文章于 2022-10-02 15:54:59 发布

weixin_33812433

最新推荐文章于 2022-10-02 15:54:59 发布

阅读量307

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gwcyulong/p/6757192.html

版权

在js中可以直接调用 hover 方法。

当鼠标悬浮在底图上时，就会显示蒙版；反之，就会消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div" style="width: 40%;margin: 0 auto;position: relative;">
    <img src="text10.jpeg" style="width: 100%;"><!--这是底图-->
    <div id="mengban" style="position: absolute;display: none;bottom: 0;left: 0;width: 100%;"><!--这是蒙版图的div-->
        <img src="text11_1.png" style="width: 100%;"><!--这是蒙版图-->
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#div").hover(function () {
        $("#mengban").show()
    },function () {
        $("#mengban").hide()
    });
</script>

</body>
</html>