鼠标移入移出改变CSS样式的小例子

当鼠标移入或移出一个元素时，我们可以通过改变CSS样式来使该元素显示不同的效果，例如改变颜色、背景等。

下面是一个示例代码，演示如何通过jQuery实现鼠标移入移出改变CSS样式的效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标移入移出改变CSS样式的小例子</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            transition: all 0.5s;
        }
        .box:hover {
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        $(function() {
            $('.box').hover(function() {
                $(this).css('transform', 'scale(1.2)');
            }, function() {
                $(this).css('transform', 'scale(1)');
            });
        });
    </script>
</body>
</html>

上面的代码中，我们设置了一个初始状态下颜色为灰色的div元素，鼠标移入时背景色变为绿色，字体颜色变为白色，同时利用CSS3的transition属性实现了渐变的过渡效果。在JavaScript中，通过使用jQuery提供的hover()方法，实现了鼠标移入时将元素放大的效果，鼠标移出时还原元素大小。

为了更好地说明这一过程，再提供一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标移入移出改变CSS样式的小例子</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 0.5s;
        }
        .box1:hover {
            background-color: blue;
            color: #fff;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #888;
            transition: all 0.5s;
            margin-top: 50px;
        }
        .box2:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
        $(function() {
            $('.box1').hover(function() {
                $(this).css('transform', 'scale(1.2)');
            }, function() {
                $(this).css('transform', 'scale(1)');
            });
        });
    </script>
</body>
</html>

此处定义了两个不同的box元素，在CSS中分别定义了鼠标移入移出需要改变的样式，通过jQuery的hover()方法分别实现了box1和box2的效果。

总之，通过上述的相关CSS样式和jQuery方法的使用，可以实现各种不同的鼠标移入移出改变CSS样式的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：鼠标移入移出改变CSS样式的小例子 - Python技术站

鼠标移入移出改变CSS样式的小例子

相关文章