<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鼠标事件
时间: 2023-09-27 11:06:08 浏览: 58
好的,您可以在每个技能的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时,会将背景色改为灰色,当鼠标移出时,又将背景色改回白色。您可以根据自己的需求来修改鼠标事件的效果。
相关问题
<div class="container"> <div class="row-cols-3"> <div class="box2"> <p> <a href="#"><img src="../static/img/飙升榜.jpg" alt="飙升榜榜" class="circle" ></a> <h2>飙升榜</h2></p> </div> <div class="box2"> <p> <a href="#"><img src="../static/img/新歌榜.jpg" alt="新歌榜" class="circle" ></a> <h2>新歌榜</h2></p></a></p> </div> <div class="box2"> <p><a href="#"><img src="../static/img/热歌榜.jpg" alt="热歌榜" class="circle" ></a> <h2>热歌榜</h2></p></a></p> </div> </div> </div>如何container中的三个box2位于同一行?
要让container中的三个box2位于同一行,你可以在containerclass属性中添加"row"类。这样,代码会变成这样:
```html
<div classcontainer">
<div class="row">
<div class="box2">
<p <a href="#"><img src="../static/img飙升榜.jpg" alt="飙升榜榜" class="circle"></a>
<h2>飙升榜</h2>
</p>
</div>
<div class="box2">
<p>
<a href="#"><img src="../static/img/新歌榜.jpg" alt="新歌榜" class="circle"></a>
<h2>新歌榜</h2>
</p>
</div>
<div class="box2">
<p>
<a href="#"><img src="../static/img/热歌榜.jpg" alt="热歌榜" class="circle"></a>
<h2>热歌榜</h2>
</p>
</div>
</div>
</div>
```
现在,这三个box2元素应该会水平排列在同一行上了。
添加商品信息,类型为甜品,颜色为粉色,重量为100克。根据上面的要求完善一下以下代码。 <div class="media"> <a class="pull-left" href="#"><img alt="cart" class="media-object" src="images/cake1.png"width="100" height="100"></a> <div class="media-body"> <h4 class="media-heading">芋你啵啵</h4> </div> </div> </td> <td>¥40.00</td> <td> <div class="cart-quantity"> <div class="quantity"> <input class="form-control" type="number" value="1"> </div> </div> </td> <td>¥40.00</td> <td><a href="#"><i class="fa fa-trash-o"></i></a></td> </tr> <tr> <td>
<div class="media">
<a class="pull-left" href="#"><img alt="cart" class="media-object" src="images/cake1.png"width="100" height="100"></a>
<div class="media-body">
<h4 class="media-heading">芋你啵啵</h4>
<p>类型:甜品</p>
<p>颜色:粉色</p>
<p>重量:100克</p>
</div>
</div>
</td>
<td>¥40.00</td>
<td>
<div class="cart-quantity">
<div class="quantity">
<input class="form-control" type="number" value="1">
</div>
</div>
</td>
<td>¥40.00</td>
<td><a href="#"><i class="fa fa-trash-o"></i></a></td>
</tr>
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![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_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)