添加 :hover 到内容属性

Question

我想在用户将鼠标悬停在内容上时更改 CSS 使用内容创建的内容的样式：“” 属性。

.breadcrumb li{
  display: inline;
}
.breadcrumb li.location+li.location::before {
  content: ">";
  color: green;
  padding-right: 2.5px;
}
li.attribute a:hover {
  color:blue;
}
li.attribute::after{
  content: "x";
  color: gray;
  vertical-align: super;
  font-weight: 300;
  font-size: 15px;
}

所以我希望 x 在悬停时变成红色。我尝试使用 :

li.attribute:hover::after{
  color: red;
}

但是当我将鼠标悬停在“Organic”这个词本身以及内容“x”上时，它会变成红色。

HTML:

<ul class="breadcrumb">
  <li  class="location">
    <a href="#">Shop</a>
  </li>
  <li  class="location">
    <a href="#">Groceries</a>
  </li>
  <li  class="location">
    <a href="#">Blueberries</a>
  </li>
  <li class="attribute">
    <a href="#">Organic</a>
  </li>

.breadcrumb li{
  display: inline;
}
.breadcrumb li.location+li.location::before {
  content: ">";
  color: green;
  padding-right: 2.5px;
}
li.attribute a:hover {
  color:blue;
}
li.attribute::after{
  content: "x";
  color: gray;
  vertical-align: super;
  font-weight: 300;
  font-size: 15px;
}
li.attribute:hover::after{
  color: red;
}

<ul class="breadcrumb">
  <li  class="location">
    <a href="#">Shop</a>
  </li>
  <li  class="location">
    <a href="#">Groceries</a>
  </li>
  <li  class="location">
    <a href="#">Blueberries</a>
  </li>
  <li class="attribute">
    <a href="#">Organic</a>
  </li>

Answer 1

如果您不介意编辑 html，那么您可以插入一个 sup 标签而不是 ::after 伪元素，并相应地应用 css -

.breadcrumb li{
  display: inline;
}
.breadcrumb li.location+li.location::before {
  content: ">";
  color: green;
  padding-right: 2.5px;
}
li.attribute a:hover {
  color:blue;
}
li.attribute sup{
  color: gray;
  font-weight: 300;
  font-size: 15px;
}
li.attribute sup:hover{
  color: red;
}

<ul class="breadcrumb">
  <li  class="location">
    <a href="#">Shop</a>
  </li>
  <li  class="location">
    <a href="#">Groceries</a>
  </li>
  <li  class="location">
    <a href="#">Blueberries</a>
  </li>
  <li class="attribute">
    <a href="#">Organic</a>
    <sup>x</sup>
  </li>

添加 :hover 到内容属性

Adding :hover to a content property

html

css

hover

pseudo-element

添加 :hover 到内容 属性

Adding :hover to a content property

html

css

hover

pseudo-element

添加 :hover 到内容属性