如何只为不同的文本元素（在同一类下）更改CSS类的一部分？

anithi1

简介：在我的代码中，将鼠标悬停在文本元素上时，下面会出现一个图像。我想使用其他文本元素来执行此操作，唯一要更改的是图像URL。但是，我不想创建一个全新的item：hover类来更改悬停后出现的图像的url。有什么办法可以解决此问题？

我有两个样式相同的课程。

<h6 class = "item"> felucian garden spread </h6>
<h6 class = "item"> yobshrimp noodle salad </h6>

将鼠标悬停在“项目”上时，下面的CSS会显示图像。但是，我希望将鼠标悬停在“虾面条沙拉”上时会显示不同的图像。即使他们属于同一班级，有没有办法做到这一点？我试图避免为每个菜单项创建新的类和悬停事件。

.item:hover:after {
  content: "";
  background-image:url(felucian.jpg); // <- i want to change this part *only* for a different text, "yobshrimp noodle salad"
  background-size: 100% 100%;
  margin-left: 30%;
  display: block;
  height: 266px;
  width: 437px;
  -webkit-animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  left: 150px;
  top: 50px;
  transition: all ease-in-out 1s
}

杰克·阿芙

无需撤消现有的HTML，实际上只能通过CSS Custom属性轻松实现。https://developer.mozilla.org/zh-CN/docs/Web/CSS/-- *

CSS-使用以下内容为背景图片创建自定义属性：

.item {
  --bg-url: url(felucian.jpg); /* you might want to set a default or something on the class */
}

.item:hover:after {
  content: "";
  background-image: var(--bg-url); /* use the custom prop like this */
  background-size: 100% 100%;
  margin-left: 30%;
  display: block;
  height: 266px;
  width: 437px;
  -webkit-animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  left: 150px;
  top: 50px;
  transition: all ease-in-out 1s;
}

HTML-使用内联样式覆盖--bg-url。

<h6 class = "item" style="--bg-url: url(felucian.jpg);"> felucian garden spread </h6>
<h6 class = "item" style="--bg-url: url(yobshrimp.jpg);"> yobshrimp noodle salad </h6>

面对类似的事情，我选择<img>在HTML中制作标签，并使用选择器使图像仅出现在悬停或焦点上，但这在技术上是可行的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。