<div class="card">鼠标移进来这个盒子的时候,在这盒子上添加一个高50框跟父盒子一样的两个div并列的
时间: 2024-04-15 20:30:06 浏览: 18
您可以使用CSS的:hover伪类和伪元素::before和::after来实现这个效果。以下是一个示例代码:
```html
<div class="card">
鼠标移入时显示的内容
</div>
```
```css
.card {
position: relative;
width: 200px;
height: 200px;
background-color: lightblue;
}
.card:hover::before,
.card:hover::after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 50px;
background-color: lightgreen;
}
.card:hover::before {
left: 0;
}
.card:hover::after {
right: 0;
}
```
在这个示例中,当鼠标悬停在.card元素上时,使用:hover伪类来选择该元素。然后使用::before和::after伪元素来创建两个并列的高50像素的div。通过position属性将它们定位到与父盒子相同的高度,并设置背景颜色。
请注意,这只是一个简单的示例,您可以根据自己的需求进行相应的调整。
相关问题
<div class="container"> <div class="card">卡片1</div><div class="card">卡片5</div> <div class="card">卡片6</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> </div>卡片每行排列6个 等距排列 css如何布局
如果要让卡片每行排列6个,可以使用flex布局,并且设置flex-wrap为wrap。具体步骤如下:
1. 设置父容器为flex容器,并设置flex-wrap为wrap,表示子元素自动换行。
2. 设置子元素的flex-basis为0,表示子元素的基准宽度为0,可以等分剩余空间。
3. 设置子元素的width属性,表示子元素的固定宽度。
4. 设置父容器的justify-content为space-between或者space-around,表示子元素等间距分布。
下面是CSS代码示例:
```
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 或者使用space-around */
}
.card {
flex-basis: 0;
width: calc(16.666% - 10px); /* 6个卡片,每个卡片宽度为16.666%,减去间距 */
margin-bottom: 10px; /* 设置卡片间的间距 */
}
```
在HTML中可以按照以下的方式布局:
```
<div class="container">
<div class="card">卡片1</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
</div>
```
这样就可以让卡片每行排列6个,并且等距排列了。
<div class="about skills"> <h2 class="title2">专业技能</h2> <div class="box"> <h4>HTML</h4> <div class="percent"> <div style="width: 50%;"></div> </div> </div> <div class="box"> <h4>CSS</h4> <div class="percent"> <div style="width: 52%;"></div> </div> </div> <div class="box"> <h4>JavaScript</h4> <div class="percent"> <div style="width: 20%;"></div> </div> </div> <div class="box"> <h4>java</h4> <div class="percent"> <div style="width: 45%;"></div> </div> </div> <div class="box"> <h4>javaweb</h4> <div class="percent"> <div style="width: 32%;"></div> </div> </div> <div class="box"> <h4>Sql</h4> <div class="percent"><div style="width: 45%;"></div></div> </div> </div>加入js鼠标事件
好的,您可以在每个技能的div标签内添加onmouseover和onmouseout属性,来实现鼠标移入移出时的效果。例如:
```
<div class="box" onmouseover="this.style.background='grey'" onmouseout="this.style.background='white'">
<h4>HTML</h4>
<div class="percent">
<div style="width: 50%;"></div>
</div>
</div>
```
在这个例子中,当鼠标移入box的div时,会将背景色改为灰色,当鼠标移出时,又将背景色改回白色。您可以根据自己的需求来修改鼠标事件的效果。