时间戳

首页 > 解决方案 > 添加 :hover 到内容属性

html - 添加 :hover 到内容属性

问题描述

我想在用户将鼠标悬停在其上时使用 content: "" 属性更改 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;
}

但是当我将鼠标悬停在“有机”一词本身以及内容“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>

标签： htmlcsshoverpseudo-element

解决方案

如果您不介意编辑 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>

推荐阅读