你知道你可以在 CSS3 中的单个元素上拥有多个背景图像吗？
background-image: url(image.png) , url(image1.png);
我需要在“悬停”事件中附加另一个图像 URL 而不是替换当前的 URL。
我试过了：
element:hover
{
background-image: url(image1.png);
}
没有运气。
但是，如果我只是简单地重新分配悬停事件中的所有图像，则一切正常：
element:hover
{
background-image: url(image.png) , url(image1.png);
}
但我不能这样做，因为我使用id's 来分配主图像，这与 id 不同。所以是这样的：
.buttonClass
{
/*width and height stuff here*/
}
.buttonClass:hover
{
/*this is where I add my ADDITIONAL image*/
}
#buttonONE
{
/*this is where I assign my primary image*/
}
#buttonTWO
{
/*this is where I assign my primary image from buttonTWO
which is different from the image assigned to buttonONE*/
}
所以id's 将具有主图像，因为它们从 id 到 id 不同。所以我可以这样做：
#buttonOne:hover
{
/*but, the hover image (the additional image) I want to append will
not differ at all. It will always be the same.*/
background-image: url(image.png) , url(image1.png);
}
#buttonTwo:hover
{
/*so this method is pretty messy and pointless,
unless of course, it's the only way?*/
background-image: url(imagedsfsdf.png) , url(image1.png);
}
所以当我可以将它添加到类悬停时，我不想在整个地方抛出不必要的悬停，对吗？
那么，有什么想法吗？
哦，还有一件事——我宁愿把 JS 和 jQuery 排除在外。除非没有别的办法...