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下改变，但是我需要在悬停时改变一切 - 当你将鼠标悬停在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下的所有文本内容。如果我指定＆gt; a，它只是在悬停时改变个体'a'，而不是像你期望的那样同时改变两者。

Answer 1

我猜你在这里有空位：

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

这可能就是问题所在。

应该是：

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

没有psuedo选择器的任何空间。

我需要整个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下的内容的字体颜色

2 个答案: