Html #标记背景图像，但.Class未在悬停时应用背景位置
我将有瓷砖的图像链接到资源。每个磁贴都是不同的，我希望每个元素都有一个ID，并使用ID加载唯一的图像。然后我希望磁贴类在磁贴上应用统一的行为。特别是悬停功能，它似乎不起作用。尝试了我能想到的关于继承的所有排列，以使其发挥作用。但是，瓷砖的其他属性继承得很好。提前感谢您的帮助Html #标记背景图像，但.Class未在悬停时应用背景位置,html,css,Html,Css,我将有瓷砖的图像链接到资源。每个磁贴都是不同的，我希望每个元素都有一个ID，并使用ID加载唯一的图像。然后我希望磁贴类在磁贴上应用统一的行为。特别是悬停功能，它似乎不起作用。尝试了我能想到的关于继承的所有排列，以使其发挥作用。但是，瓷砖的其他属性继承得很好。提前感谢您的帮助 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DEVELOPMENT</title&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DEVELOPMENT</title>
<style type="text/css">
.Tile{
margin: 10px;
float: left;
width: 160px;
height: 140px;
/* background: url("Images/Webmail.jpg") no-repeat 0 0;
Obviously with the background here it works.
All tiles will animate the same way
(slide background-position on :hover)
but I have to load different images for each tile.
#Webmail should inherit Tile and apply the position
change to whatever tile is hovered over. Each tile has a unique
tag that loads the image.
*/
}
.Tile:hover{
background-position: 0 -140px;
}
.Tile span{
position: absolute;
top: -999em;
}
#Webmail{
background: url("Images/Webmail.jpg") no-repeat 0 0;
}
#ITEM2{
background: url("Images/ITEM2.jpg") no-repeat 0 0;
}
#ITEM3{
background: url("Images/ITEM3.jpg") no-repeat 0 0;
}
</style>
</head>
<body>
<div id="Tile_Container">
<!-- Start Row 1 -->
<div id="Row">
<a id="Webmail" class = "Tile" href="#" title="Webmail">
<span>Webmail</span>
</a>
<a id="ITEM2" class = "Tile" href="#" title="ITEM2">
<span>ITEM2</span>
</a>
<a id="ITEM3" class = "Tile" href="#" title="ITEM3">
<span>ITEM3</span>
</a>
</div>
<!-- Start Row 2 ... more rows and items-->
</body>
</html>
发展
.瓷砖{
利润率：10px；
浮动：左；
宽度：160px；
高度：140像素；
/*背景：url（“Images/Webmail.jpg”）不重复0；
显然，在这里的背景下，它是有效的。
所有瓷砖将以相同的方式设置动画
（幻灯片背景位置：悬停）
但是我必须为每个瓷砖加载不同的图像。
#Webmail应继承平铺并应用该位置
更改为悬停在任何互动程序上。每个互动程序都有一个唯一的
加载图像的标记。
*/
}
.Tile:悬停{
背景位置：0-140px；
}
.瓷砖跨度{
位置：绝对位置；
顶部：-999em；
}
#网络邮件{
背景：url（“Images/Webmail.jpg”）不重复0；
}
#项目2{
背景：url（“Images/ITEM2.jpg”）不重复0；
}
#项目3{
背景：url（“Images/ITEM3.jpg”）不重复0；
}
背景：#Webmail#ITEM2#ITEM3background背景位置背景图像背景重复背景位置背景.Tile {
margin: 10px;
float: left;
width: 160px;
height: 140px;
background-repeat: no-repeat;
background-position: 0 0; /* you don't even have to specify that */
}
.Tile:hover {
background-position: 0 -140px;
}
.Tile span {
position: absolute;
top: -999em;
}
#Webmail {
background-image: url("Images/Webmail.jpg");
}
#ITEM2 {
background-image: url("Images/ITEM2.jpg");
}
#ITEM3 {
background-image: url("Images/ITEM3.jpg");
}
背景位置.Tile:hover#Webmail：hoverbackgroundbackgroundbackground positionbackgroundbackground.Tile{
利润率：10px；
浮动：左；
宽度：160px；
高度：140像素；
边框：1px点蓝色；
背景重复：无重复；
背景位置：0；
}
.Tile:悬停{
背景位置：0-20px；
}
.瓷砖跨度{
位置：绝对位置；
顶部：-999em；
}
#网络邮件{
背景图像：url（“http://placehold.it/100x100");
}
#项目2{
背景图像：url（“http://placehold.it/140x100");
}
#项目3{
背景图像：url（“http://placehold.it/100x120");
}问题在于，您试图在.class上设置悬停操作，而在#id上设置背景位置。该id具有更高的特定性，因此覆盖了.class:hover 问题说明：
.Tile{
利润率：10px；
浮动：左；
宽度：160px；
高度：140像素；
}
/*这就是问题所在*/
.Tile:悬停{
背景位置：0-140px；
}
.瓷砖跨度{
位置：绝对位置；
顶部：-999em；
}
#网络邮件{
背景：url（“http://lorempixel.com/160/280）不重复0；
}
#项目2{
背景：url（“http://lorempixel.com/170/280）不重复0；
}
#项目3{
背景：url（“http://lorempixel.com/180/280）不重复0；
}
id类：hover