js动态添加hover事件

最新推荐文章于 2024-04-23 16:55:33 发布

将慧圣

最新推荐文章于 2024-04-23 16:55:33 发布

阅读量2w

点赞数 3

分类专栏：前端文档分享

本文链接：https://blog.csdn.net/qq_42786011/article/details/102689035

版权

前端文档分享专栏收录该内容

55 篇文章 5 订阅

订阅专栏

通常前端css鼠标滑过，离开的事件加在css,scss,less中，但是比较复杂的情景，比如鼠标滑入触发多个事件亦或者其它元素的样式变化，如阴影，遮罩层，边框等等。这个时候JS控制hover事件是最好的选择，下面插入一段自己经常用到的特效，仅供参考。

直接上代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
        }

        ul {
            overflow: hidden;
        }

        .scheme-content ul li {
            width: 248px;
            height: 303px;
            float: left;
            margin-right: 20px;
            border: 1px solid rgba(229, 229, 229, 1);
            opacity: .86;
            position: relative;
            text-align: center;
        }

        .scheme-content img {
            width: 100%;
        }

        .chat_log {
            position: absolute;
            background: #000000;
            opacity: .3;
        }
    </style>
</head>

<body>
    <div class="scheme-content">
        <ul>
            <li class="newbie-zone" toId="1">
                <div class="chat_log"></div>
                <img src="./img/newbie_zone.png" alt="">
                <p>新手专区</p>
                <p>新手卖家入门必备<br>店铺运营基础学习</p>
            </li>
            <li class="growth-stage" toId="2">
                <div class="chat_log"></div>
                <img src="./img/growth_stage.png" alt="">
                <p>成长阶段</p>
                <p>新手卖家入门必备<br>店铺运营基础学习</p>
            </li>
            <li class="lifting-stage" toId="3">
                <div class="chat_log"></div>
                <img src="./img/lifting_stage.png" alt="">
                <p>提升阶段</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;店铺处罚&数据一目了然<br>运营&升级&买家诉求深度了解</p>
            </li>
        </ul>
    </div>
</body>

<script src="./jquery.min.js"></script>
<!-- <script src="./hover.js"></script> -->

<script>
    $(".scheme-content ul li").hover(function () {
        var $width = $(this).find('img').width();
        var $height = $(this).find('img').height();
        console.log($width, $height)
        $(this).find('.chat_log').width($width);
        $(this).find('.chat_log').height($height);
        $(this).find('.chat_log').css('opacity', 0.3);
        $(this).css('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0.18)');
    }, function () {
        $(this).find('.chat_log').width(0);
        $(this).find('.chat_log').height(0);
        $(this).find('.chat_log').css('opacity', 1);
        $(this).css('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0)');
    });
</script>

</html>

效果，上边是固定样式，下边鼠标滑入效果。

将慧圣

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
js动态添加hover事件

通常前端css鼠标滑过，离开的事件加在css,scss,less中，但是比较复杂的情景，比如鼠标滑入触发多个事件亦或者其它元素的样式变化，如阴影，遮罩层，边框等等。这个时候JS控制hover事件是最好的选择，下面插入一段自己经常用到的特效，仅供参考。直接上代码。<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫