<div class="rotation"> <ul class="Pictureul1"> <li class="pli"><a href="#"><img src="images/p1.jpg" alt=""></a> <div class="pi2"></div> <div class="pi3"></div> <div class="pi4"></div> </li> </ul> <ul class="Pictureul2"> <li class="point1"><a href="#"><img src="images/rpoint.jpg" alt=""></a></li> <li class="point2"><a href="#"><img src="images/bpoint.jpg" alt=""></a></li> <li class="point3"><a href="#"><img src="images/bpoint.jpg" alt=""></a></li> <li class="point4"><a href="#"><img src="images/bpoint.jpg" alt=""></a></li> </ul> </div>写css文件让鼠标点击point时候能够发生图片变化其中divpi2位图二并且采用的属性是background导入的图片
时间: 2023-07-19 10:28:23 浏览: 40
可以使用CSS的:hover选择器和background-image属性来实现鼠标点击point时发生图片变化的效果。具体代码如下:
```css
.Pictureul2 .point1:hover ~ .Pictureul1 .pli {
background-image: url(images/p1.jpg);
}
.Pictureul2 .point2:hover ~ .Pictureul1 .pli {
background-image: url(images/p2.jpg);
}
.Pictureul2 .point3:hover ~ .Pictureul1 .pli {
background-image: url(images/p3.jpg);
}
.Pictureul2 .point4:hover ~ .Pictureul1 .pli {
background-image: url(images/p4.jpg);
}
```
其中,.Pictureul2 .point1:hover表示当鼠标悬停在class为point1的元素上时,.Pictureul1 .pli的背景图片会变成images/p1.jpg。同理,.Pictureul2 .point2:hover ~ .Pictureul1 .pli表示当鼠标悬停在class为point2的元素上时,.Pictureul1 .pli的背景图片会变成images/p2.jpg,依此类推。
需要注意的是,div.pi2作为一个位图,需要设置width和height属性,同时将background-repeat属性设置为no-repeat,保证位图不会重复。
```css
div.pi2 {
width: 100px;
height: 100px;
background-image: url(images/pi2.jpg);
background-repeat: no-repeat;
}
```