鼠标触碰变色内部式写法
时间: 2023-12-06 10:02:26 浏览: 29
你可以使用CSS中的:hover伪类来实现鼠标悬停时改变元素颜色的效果。以下是一些内部式写法的示例:
1. 改变背景颜色
```
<style>
.box {
background-color: green;
width: 100px;
height: 100px;
}
.box:hover {
background-color: red;
}
</style>
<div class="box"></div>
```
2. 改变文字颜色
```
<style>
.text {
color: green;
}
.text:hover {
color: red;
}
</style>
<p class="text">这是一段文字</p>
```
3. 改变边框颜色
```
<style>
.border {
border: 2px solid green;
width: 100px;
height: 100px;
}
.border:hover {
border-color: red;
}
</style>
<div class="border"></div>
```
4. 改变图片透明度
```
<style>
.img {
opacity: 0.5;
}
.img:hover {
opacity: 1;
}
</style>
<img class="img" src="example.jpg" alt="example">
```