html - 鼠标悬停文本内容与边框变色

最新推荐文章于 2024-01-13 15:18:11 发布

zyljjf

最新推荐文章于 2024-01-13 15:18:11 发布

阅读量1.6w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 鼠标

本文链接：https://blog.youkuaiyun.com/zyljjf/article/details/78099130

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的简单鼠标悬停效果案例。当鼠标悬停在指定区域时，该区域的边框颜色会变为红色，并且内部图标及文字颜色也会随之变化。案例中包含多个可交互元素，每个元素都具有相同的悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html - 鼠标悬停文本内容与边框变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .demo{
                border: 1px solid #ffffff;
                width: 100px;
                height: 100px;
                text-align: center;
                float: left;
            }
            .icon{
                width: 60px;
                height: 56px;
                background: url(img/tb01.png) no-repeat;
                margin: 10px auto;
            }

            .demo:hover{
                border: 1px solid red;
                cursor: pointer;
            }

            .demo:hover .icon{
                background: url(img/tb02.png) no-repeat;
            }

            .demo:hover .font{
                color: red;
            }

        </style>
    </head>
    <body>

        <div class="demo">
            <div class="icon">
            </div>
            <div class="font">
                文本内容
            </div>
        </div>

        <div class="demo">
            <div class="icon">
            </div>
            <div class="font">
                文本内容
            </div>
        </div>

        <div class="demo">
            <div class="icon">
            </div>
            <div class="font">
                文本内容
            </div>
        </div>

        <div class="demo">
            <div class="icon">
            </div>
            <div class="font">
                文本内容
            </div>
        </div>

    </body>
</html>