Question

我将使用链接到资源的图片。每个Tile都不同，我希望每个元素都有一个ID，并使用ID加载唯一的图像。然后我希望Tile类在TILES上应用统一的行为。特别是悬停功能似乎不起作用。尝试了关于继承的所有排列，以使其发挥作用。然而，Tile的其他属性继承罚款。提前感谢您的帮助。

<!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>

Answer 1

您在background:，#Webmail和#ITEM2中使用#ITEM3。 CSS属性background是所有背景样式的组合，如background-position，background-image，background-repeat等。因此，background-position会覆盖background。

要解决此问题，您可以使用以下代码段：

.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");
}

Answer 2

background-position值.Tile:hover的特异性低于#Webmail中的值，依此类推，这意味着无论{中设置的值如何，更具体的CSS规则优先级都会优先。 {1}}规则。

请注意，:hover短手属性会在应用background规则中指定的值之前将所有背景属性（例如background-position）初始化为默认值如果background属性出现在CSS规则中的任何单个背景属性之后，则会出现意外结果。

您可以阅读background属性的工作原理： http://www.w3.org/TR/css3-background/#the-background

＆＃13;

background

＆＃13;

.Tile {
  margin: 10px;
  float: left;
  width: 160px;
  height: 140px;
  border: 1px dotted blue;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.Tile:hover {
  background-position: 0 -20px;
}
.Tile span {
  position: absolute;
  top: -999em;
}
#Webmail {
  background-image: url("http://placehold.it/100x100");
}
#ITEM2 {
  background-image: url("http://placehold.it/140x100");
}
#ITEM3 {
  background-image: url("http://placehold.it/100x120");
}

＆＃13;

Answer 3

问题是您尝试在.class上设置悬停操作，而背景位置设置在#id上。 id具有更高的特异性，因此会覆盖.class：hover。

问题说明：

.Tile {
  margin: 10px;
  float: left;
  width: 160px;
  height: 140px;
}

/* this here is the problem */
.Tile:hover {
  background-position: 0 -140px;
}

.Tile span {
  position: absolute;
  top: -999em;
}

#Webmail {
  background: url("http://lorempixel.com/160/280") no-repeat 0 0;
}

#ITEM2 {
  background: url("http://lorempixel.com/170/280") no-repeat 0 0;
}

#ITEM3 {
  background: url("http://lorempixel.com/180/280") no-repeat 0 0;
}

<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-->
</div>

所以可能的解决方案是：

通过将:hover规则应用于所有ID，而不是共享类，使.Tile { margin: 10px; float: left; width: 160px; height: 140px; } /* changed: */ #Webmail:hover, #ITEM2:hover, #ITEM3:hover { background-position: 0 -140px; } .Tile span { position: absolute; top: -999em; } #Webmail { background: url("http://lorempixel.com/160/280") no-repeat 0 0; } #ITEM2 { background: url("http://lorempixel.com/170/280") no-repeat 0 0; } #ITEM3 { background: url("http://lorempixel.com/180/280") no-repeat 0 0; }规则更具体。

<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-->
</div>

.Tile {
  margin: 10px;
  float: left;
  width: 160px;
  height: 140px;
}

.Tile:hover {
  background-position: 0 -140px;
}

.Tile span {
  position: absolute;
  top: -999em;
}

/* changed */
.Webmail {
  background: url("http://lorempixel.com/160/280") no-repeat 0 0;
}

.ITEM2 {
  background: url("http://lorempixel.com/170/280") no-repeat 0 0;
}

.ITEM3 {
  background: url("http://lorempixel.com/180/280") no-repeat 0 0;
}

或者，将ID更改为标记中的类。

<div id="Tile_Container">
  <!-- Start Row 1 -->
  <div id="Row">
    <!-- changed. Note space separated classes in attribute -->
    <a class="Tile Webmail" href="#" title="Webmail">
      <span>Webmail</span>
    </a>
    <a class="Tile ITEM2" href="#" title="ITEM2">
      <span>ITEM2</span>
    </a>

    <a class="Tile ITEM3" href="#" title="ITEM3">
      <span>ITEM3</span>
    </a>
  </div>
  <!-- Start Row 2 ... more rows and items-->
</div>

push(cards: Card[])

#Tag表示背景图片但.Class在悬停时不应用背景位置

3 个答案: