hover的使用

最新推荐文章于 2024-04-20 11:14:30 发布

原创最新推荐文章于 2024-04-20 11:14:30 发布 · 449 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

这段HTML代码展示了CSS3中如何通过父级div在鼠标悬停时改变子级p元素的颜色。当鼠标移到div上时，p元素的文字颜色会变为绿色。这演示了CSS的选择器应用，特别是父级: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>
        div:hover p{
            color: green
        }
    </style>
</head>
<body>
    <div>
        爷爷
        <p>父亲</p>
    </div>
</body>
</html>
<!--

hover 表示对鼠标移入时候对元素状态的改变

改变自己的状态选择器 hover{ 声明 }

通过父级改变子级元素父级选择器：hover 子级选择器的使用{ 声明}

css3中的选择器+