Div获得鼠标焦点时自动放大

最新推荐文章于 2023-06-15 14:45:01 发布

A APE

最新推荐文章于 2023-06-15 14:45:01 发布

阅读量969

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML DIV

本文链接：https://blog.youkuaiyun.com/weixin_41634085/article/details/82454792

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种使用CSS实现hover效果的方法：一种是通过ID选择器，另一种是直接使用元素选择器。这两种方法均可使div元素在鼠标悬停时改变样式，包括光标变为手指图标、过渡动画及缩放效果。

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

//method 1(id选择器)

<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">   
            #extend:HOVER {
            cursor: pointer;
            transition: all 0.6s;
            transform: scale(1.5);
            }
        </style>
    </head>

    <body>
        <div id="extend" style="background-color:#09FFCB; height:100px; width:100px;float:left;">test1</div>
        <div id="extend" style="background-color:#ABFE05; height:100px; width:100px;float:left;margin-left:50px;">test2</div>
    </body>
</html>


//method 2(元素选择器)  

<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">   
            div:HOVER {
            cursor: pointer;
            transition: all 0.6s;
            transform: scale(1.5);
            }
        </style>
    </head>

    <body>
        <div style="background-color:#09FFCB; height:100px; width:100px;float:left;">test1</div>
        <div style="background-color:#ABFE05; height:100px; width:100px;float:left;margin-left:50px;">test2</div>
    </body>
</html>