css 移上去显示隐藏
时间: 2023-10-15 19:24:00 浏览: 77
要实现在移上去显示隐藏的效果,可以使用CSS的:hover伪类和display属性。当鼠标移上去时,通过改变元素的display属性来实现显示和隐藏。
例如,可以使用以下代码来实现这个效果:
```html
<!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>CSS移上去显示隐藏</title>
<style>
.baba {
width: 200px;
height: 200px;
background-color: pink;
display: none;
}
.mama:hover + .baba {
display: block;
}
.mama,
.baba {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="mama">猪妈妈</div>
<div class="baba">猪爸爸</div>
</body>
</html>
```
在这个例子中,当鼠标移上去猪妈妈(.mama)时,猪爸爸(.baba)会显示出来。通过为猪妈妈(.mama)元素添加:hover伪类选择器,并使用 + 相邻选择器来选择猪爸爸(.baba)元素,并将其display属性改为block,实现了在移上去显示隐藏的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [CSS元素的显示和隐藏](https://blog.csdn.net/weixin_45413603/article/details/125039710)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]