在 ul 下更改内容的字体颜色，在悬停时

change font color of content under ul , on hover

本文关键字：字体 颜色 悬停 ul      更新时间：2023-09-26
.text-right
    %ul#conversation
      %li
        %ul.btnClear
          %li
            - unless statement == Statement.featured.first
              = link_to "", display_featured_path(:current_featured_statement_id => statement.id, :direction => "previous"), :remote => true, :class=> "fa fa-play"
          %li
            - unless statement == Statement.featured.first
              = link_to "PREVIOUS", display_featured_path(:current_featured_statement_id => statement.id, :direction => "previous"), :remote => true, :class=> ""

尝试将 UL 放在具有悬停效果的按钮下，或在悬停时更改 UL 下的所有文本。我可以让 ul 下的个人 a 进行更改，但我需要在悬停时更改所有内容 - 当您将鼠标悬停在 ul 的任何部分时。字体真棒图标和链接。

.btnClear:hover , li ul.btnClear:hover, ul#conversation li ul:hover{
color: #4dbbca !important;
/*background: transparent !important;*/
text-decoration: none;
cursor: pointer;
background-color: yellow;

}

我可以使用上面的 CSS 更改背景，但我需要整个 ul 下的所有文本内容。如果我指定 a>，它只是在悬停时更改单个"a"，而不是像您所期望的那样同时更改两者。

我想你这里有一个空格：

.btnClear:hover , li ul.btnClear :hover, ul#conversation li ul:hover{
//------------------------------^^

这可能是问题所在。

它应该是：

.btnClear:hover , li ul.btnClear:hover, ul#conversation li ul:hover{

没有任何空间用于伪选择器。

我需要整个ul下的所有文本内容。

在这种情况下，您可以尝试这样做：

.btnClear:hover , li ul.btnClear:hover a, ul#conversation li ul:hover{
//------------------------------^^^^^^^^

一个简单的测试用例： 

.b:hover a {
  color: red;
}
<ul class='a'>
  <li>asdfasfd</li>
  <li>asdfasfd</li>
  <li>asdfasfdasd
    <ul class='b'>
      <li><a>asdfasfd</a></li>
      <li><a>asdfasfd</a></li>
      <li><a>asdfasfd</a></li>
    </ul>
  </li>
</ul>

听起来您想在悬停时定位悬停的项目及其一些子项？目前，您已经编写了三个不同的选择器，但它们是多余的，因为它们都针对同一元素上的同一事件(只是具有不同的特异性(。

正如我所提到的，我不完全确定您要做什么，但这里有一些有关如何实现它的提示：

.btnClear:hover { ... } // targets .btnClear when it's hovered
.btnClear:hover ul { ... } // targets a ul inside .btnClear when .btnClear is hovered
.btnClear:hover a { ... } // targets an anchor inside .btnClear when .btnClear is hovered
相关文章：