Question

我想知道，我的网站上有很多形象依赖于课程。我想知道是否可以使用CSS来做到这一点。

   .willReactOnHover.class1{ background: url('../images/image1.png');}
   .willReactOnHover.class2{ background: url('../images/image2.png');}

然后，在悬停

   .willReactOnHover:hover{
        background: /*Here, .class1 would be .image1-hover.png AND
        .class2 would be .image2-hover.png */           
    }

我不知道是否可能只有一个后缀 - 覆盖所有现有路径即使不同......我知道我可以用javascript但我喜欢纯净的CSS解决方案否则我必须为每个班级创建悬停事件，但由于每个班级都有相同的任务，我不知道是否有这样的方式。最佳。或者可能有一个我可以用来实现这个目标的CSS选择器吗？

Answer 1

在CSS-3之前，人们经常使用background-position和图片精灵，所以你可以使用旧马背景位置，如下所示：

.willReactOnHover.class1{ background: url('../images/image1.png');}
   .willReactOnHover.class2{ background: url('../images/image2.png');} 

.willReactOnHover:hover{
        background-position:-10px;          
    }

Answer 2

不幸的是，目前使用纯CSS似乎是不可能的。如果你使用像LESS那样的预处理器，你可以使用loop来轻松完成你想要的东西：

CSS示例

@url: "../images/image";
@ext: ".png";
@hover: "_hover";

.generate-images(5);

.generate-images(@n, @i: 1) when (@i =< @n) {
  .class@{i} {
    background-image: url("@{url}@{i}@{ext}");
  }
  .class@{i}:hover {
    background-image: url("@{url}@{i}@{hover}@{ext}");
  }
  .generate-images(@n, (@i + 1));
}

<强>演示

Try before buy

Answer 3

您似乎可以为所需的每个类定义CSS规则。

也许以下内容可能会有所帮助。

＆＃13;

Prog1.o

＆＃13;

.willhover.class1 {
  color: blue;
}
.willhover.class2 {
  color: green;
}
.willhover.class1:hover {
  background-color: yellow;
}
.willhover.class2:hover {
  background-color: beige;
}

＆＃13;

但是，您仍然需要创建特定的两种类型的CSS规则，一种用于指向非悬停图像，另一种用于指向悬停图像。

是否可以使用CSS在悬停时向每个图像路径添加文本？

3 个答案: