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

【问题标题】：change font color of content under ul , on hover在悬停时更改 ul 下内容的字体颜色
【发布时间】：2015-03-31 06:56:16
【问题描述】：

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

【问题讨论】：

很抱歉听起来像个菜鸟，但是您在上面的代码中使用什么语言/框架？
@gerdi 那是 HAML，在 Rails 应用程序中（但它可以在没有 Rails 的情况下使用）。
是的。哈姆类似于玉和，bootstrap / rails

标签： javascript jquery css haml

【解决方案1】：

我猜你这里有一个空间：

.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>

【讨论】：

没有。那不是问题。这是一个错字，但感谢您指出。
大声笑.. 谢谢，伙计。应该忘记我的骄傲并在不久前点击堆栈溢出..

【解决方案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

【讨论】：