嘴里坚持着逞强，眼里的泪在投降

导航

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

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

效果图：

1、悬浮：

2、未悬浮

 

posted on 2017-04-24 15:44  屏幕后的无奈  阅读(925)  评论(0)  编辑  收藏  举报