如何在悬停时更改 ::before 的背景颜色？答案

【问题标题】：How can I change background color of ::before on hover?如何在悬停时更改 ::before 的背景颜色？
【发布时间】：2021-12-29 23:44:53
【问题描述】：

我有一个 ul-li 列表，当我将鼠标悬停在最后一个 li ::before 元素时，它看起来是白色的，而且不太好。所以当我悬停最后一个 li 元素时，我需要更改它。我怎样才能做到？我的代码：

<div className="dropup-content">
  <ul>
     <li className="content-item">
               <a
                 className="content-link"
                 href="#" 
                 target="_blank"
               >
                 <i
                   className={`  content-icon `}
                 ></i>
                 <div className="content-info">
                   <span
                     className={`content-info-name }`}
                   >
                    Name
                   </span>
                   <span className="content-info-subtitle"><Subtitle</span>
                 </div>
               </a>
             </li>
             <li className="content-item">
              .
              .
              .
    </ul>
</div>

CSS：

.dropup {
  position: relative;
  display: inline-block;
  transition: all 0.2s ease;
}
.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  bottom: 79px;
  right: 3px;
  width: 250px;
  z-index: 1;
  border-radius: 5px;
}
.dropup-content::before {
  position: absolute;
  bottom: -8px;
  right: 25px;
  left: auto;
  display: inline-block !important;
  border-right: 8px solid transparent;
  border-top: 8px solid #f1f1f1;
  border-left: 8px solid transparent;
  content: "";
}

我尝试过的：

.content-item:hover:last-child .dropup-content::before {
  background:red;
}

我需要在悬停时将该颜色更改为灰色。那我该怎么办？

【问题讨论】：

您不能使用 CSS 选择器在 UI 树中“上升”。您需要选择另一种方法来为箭头着色：一种方法可能是使箭头成为最后一个孩子的特征（而不是弹出窗口中的一个），并使其伸出底部；默认为白色，在 :hover 状态下与项目背景一起改变颜色。

标签： javascript html css reactjs sass

【解决方案1】：

.drop div {
  position: relative;
  padding: 10px;
}

.drop div:nth-of-type(odd) {
  background: #eee;
}

.drop div:nth-last-of-type(1)::after {
  content: 'after';
  position: absolute;
  color: teal;
  bottom: 0;
  left: 100px;
}
.drop div:nth-last-of-type(1):hover::after {
  color: red;
  background: #fff;
}

<div class="drop">
  <div>item A</div>
  <div>item B</div>
  <div>item C</div>
</div>

【讨论】：