Question

对背景图像进行图像翻转，因为我有几张图片，我想知道如何为多张图片重复使用相同的#Rollover？

<div id="leftprod"><a href="product.php" id="myRollover" ></a></div>


#Rollover {
 background-image: url('images/mood160-1.jpg');
 width: 160px;
 height:207px;

 position: absolute;

}

#Rollover:hover {
 background-image: url('images/mood160-2.jpg');
 width: 160px;
 height:207px;
 border: solid 0px #676767;

}

Answer 1

目前你有<a id="Rollover">

将其更改为使用类而不是像这样的ID

<a class="rollover">

然后你可以使用这个CSS：

.rollover:hover {
 background-image: url('images/mood160-2.jpg');
 width: 160px;
 height:207px;
 border: solid 0px #676767;
}

这会将翻转应用于任何类rollover

的翻转

ID和类之间的主要区别是你应该只使用一次ID，因为你想要对多个元素应用翻转效果，你应该使用一个类。

Answer 2

您通常会创建一个包含各种图像的父元素，然后使用以下样式：

#Parent:hover #Rollover1 { background-image: ... }
#Parent:hover #Rollover2 { background-image: ... }

这使您可以在整个组悬停时更改滚动器。

Answer 3

将其更改为类，并将其作为class =“Rollover”应用于您想要的所有图像。

.Rollover {
    ...
}

而不是

#Rollover

Answer 4

使用class代替id，并在所有图片中添加class="Rollover"。

在您的css中将#Rollover更改为.Rollover

阅读这篇好文章：

The Difference Between ID and Class

Answer 5

我们需要在每次加载图像时更改图像ID：

<img src="images/icons/button_cancelled_gray.jpg" 
     border="0" 
     id="Image1<?php echo $i +=1; ?>" 
     onMouseOver="MM_swapImage('Image1<?php echo $k +=1; ?>','','images/icons/button_cancelled.jpg',1)" 
     onMouseOut="MM_swapImgRestore()"
/>

所以我在其帮助下添加了一个PHP计数器，但请记住我已经写过Image1它是单独定义图像，如果你使用另一个图像只需将其改为Image2，同样玩你的计数器不会再次使用同一个变量，因为它会改变必须相似的id，或者它会产生多个必须相同的id。

如何对多个背景图像使用CSS翻转

5 个答案: