用html、css实现评论区,要求鼠标经过“评论“ ”楼主评论“时会显示不同内容
时间: 2023-09-10 16:11:29 浏览: 57
好的,下面是一个简单的实现方法:
HTML代码:
```html
<div class="comment-section">
<div class="comment-header">
<span class="comment-title">评论</span>
<span class="host-comment">楼主评论</span>
</div>
<div class="comment-body">
<!--评论内容-->
</div>
</div>
```
CSS代码:
```css
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f5f5f5;
}
.comment-title:hover + .host-comment,
.host-comment:hover {
display: block;
}
.comment-title:hover + .host-comment::before,
.host-comment:hover::before {
content: "点击查看";
position: absolute;
z-index: 1;
top: -20px;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
font-size: 14px;
}
.comment-title:hover + .host-comment::after,
.host-comment:hover::after {
content: "";
position: absolute;
z-index: 0;
top: -10px;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #333 transparent;
}
```
解释一下CSS代码:
首先,我们使用flex布局将评论标题和楼主评论放在同一行,并添加了一些样式。
然后,我们使用:hover伪类选择器来监听当鼠标悬停在评论标题或楼主评论上时的事件。
接着,我们使用相邻兄弟选择器和后代选择器来选择评论标题和楼主评论的内容。当鼠标悬停在评论标题上时,我们将楼主评论的内容显示出来;当鼠标悬停在楼主评论上时,我们将评论标题下方的内容显示出来。
最后,我们使用:before和:after伪元素来添加一个提示框,提示用户点击可以查看评论或楼主评论的内容。同时,我们使用transform属性来将提示框水平居中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)