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

Question

.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 的任何部分上时。字体真棒图标和 link。

.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'，而不是像您期望的那样同时更改两者。

Answer 1

我猜你这里有一个 space:

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

这可能是问题所在。

应该是：

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

没有任何伪选择器 space。

我需要整个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>

Answer 2

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

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

.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

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

change font color of content under ul , on hover

javascript

jquery

css

haml