html手风琴效果
时间: 2023-07-05 10:10:04 浏览: 77
HTML手风琴效果通常使用CSS的伪类:hover来实现。下面是一个简单的HTML手风琴效果的代码示例:
```html
<div class="accordion">
<div class="accordion-header">标题1</div>
<div class="accordion-content">内容1</div>
<div class="accordion-header">标题2</div>
<div class="accordion-content">内容2</div>
<div class="accordion-header">标题3</div>
<div class="accordion-content">内容3</div>
</div>
```
```css
.accordion-header {
background-color: #eee;
padding: 10px;
cursor: pointer;
}
.accordion-content {
display: none;
padding: 10px;
}
.accordion-header:hover {
background-color: #ccc;
}
.accordion-header.active {
background-color: #ccc;
}
.accordion-header.active + .accordion-content {
display: block;
}
```
在这个代码示例中,我们使用了一个div作为手风琴的容器,每个标题和内容都是一个div。CSS中,我们为标题和内容分别定义了样式。当鼠标悬停在标题上时,我们改变了它的背景颜色,同时当我们点击标题时,我们给它添加了一个.active类。当一个标题拥有了.active类时,它的下一个兄弟元素(即对应的内容)就会显示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)