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

摘要：在我的代码中，当鼠标悬停在文本元素上时，下面会出现一个图像。我想对其他文本元素执行此操作，我唯一想更改的是图像url。但是，我不想创建一个全新的项目：hover类来更改悬停后显示的图像的url。有办法解决这个问题吗

我有两个项目的风格与同一类

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

费卢西安花园酒店 yobshrimp面条沙拉 当鼠标悬停在“项目”上时，下面的CSS会显示一个图像。然而，我希望当鼠标悬停在“yobshrimp面条沙拉”上时会出现一个不同的图像。有没有办法做到这一点，即使它们属于同一个类？我试图避免为每个菜单项创建新的类和悬停事件

.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
}

。项目：悬停：之后{
内容：“；
背景图片：url（felucian.jpg）；//您可以在HTML中使用自定义属性

费卢西安花园酒店
yobshrimp面条沙拉

在CSS中：

。项目：悬停：之后{
...
背景图像：attr（数据悬停图像url）；
}

关于

attr（）

：

编辑： 由于不是很多浏览器都支持自定义属性，因此可以使用javascript迭代所有

.item

元素并更改它们的url。例如：

const items=document.getElementsByClassName（“item”）；
用于（项目的常数项）{
item.style.backgroundImage=
url（“+item.getAttribute（“数据悬停图像”）+”）；
}

您可以使用

：nth-child（）

，如下例所示。这样，您可以根据特定规则选择特定元素。对于具有类名的第二个元素，请使用

：nth child（2）

。项：第n个子项（2）：悬停{
背景颜色：黄色；
}

费卢西安花园酒店

---

yobshrimp面条沙拉在不撤消HTML的情况下，只有使用CSS自定义属性才能轻松完成*

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

.item{
--bg url:url（felucian.jpg）；/*您可能需要在类上设置默认值或其他内容*/
}
。项目：悬停：在{
内容：“；
背景图片：var（--bg url）；/*像这样使用自定义道具*/
背景大小：100%100%；
左缘：30%；
显示：块；
高度：266px；
宽度：437px；
-webkit动画：淡入顶部0.6s立方贝塞尔（0.39,0.575,0.565,1）二者；
动画：淡入顶部的0.6s三次贝塞尔（0.39,0.575,0.565,1）二者；
左：150px；
顶部：50px；
过渡：所有输入输出1秒；
}

HTML-使用内联样式覆盖

--bg url

费卢西安花园酒店 yobshrimp面条沙拉

---

面对类似的情况，我选择在HTML中使用

标记，并使用选择器使图像仅显示在悬停或焦点上，但这在技术上是可行的。

不完全确定您要问什么，但是否可以使用内联span标记？不，适用于一个类中的一个元素的内容适用于该类中的所有元素。如果您如果要做一些不同的事情，您必须使其他项不同。一个额外的类或其他选择器。使用

：n子项（2）

仅选择第二个元素。是否改为更改HTML？在撰写本文时，

attr（）

在任何主要浏览器上都不用于内容之外的任何属性。我尝试了这个解决方案，但图像应该在空白处…这是因为@JakeAve上面提到的问题吗？很遗憾，可能是这样。您可以使用Javascript获取

项

类的所有元素，并将样式设置为属性值。