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

Question

我想知道，我的网站上有很多图片的行为取决于 class。例如，我想知道是否可以使用 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 */           
    }

我不知道是否可以只在所有现有路径上添加一个后缀 -hover，即使不同...我知道 javascript 我可以，但我喜欢纯粹的 CSS 解决方案，否则我必须为每个 class 创建悬停事件，但由于每个 class 的任务相同，我不知道是否有最佳方法。或者我可以使用 CSS 选择器来实现这个目标吗？

Answer 1

您似乎可以为每个需要的 class 定义一个 CSS 规则。

也许以下内容对您有所帮助。

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

<div class="willhover class1">Class 1</div>
<div class="willhover class2">Class 2</div>

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

Answer 2

在 CSS-3 之前人们经常使用 background-position 和图像精灵，所以你可以使用老马背景位置，像这样：

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

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

Answer 3

不幸的是，目前这对于纯 CSS 似乎是不可能的。如果你使用预处理器，比如 LESS, you could use a 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

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

Is it possible to add text to every image path on hover using CSS?

css

css-selectors