CSS 基础学习-164 CSS 使用伪类控制移动鼠标div显示元素

由 hrs, 16 二月, 2022

使用伪类控制移动鼠标div显示元素

实例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
  width:400px;
}

div:hover p{
  display: block;
}
</style>
</head>
<body>

  <h1>鼠标触发显示</h1>
  <div>鼠标移到我上面来显示 p 元素
    <p>哈哈！我在这里！</p>
</div>

</body>
</html>

运行效果：

css-164.png

标签

评论