Question

我想要它，以便当我将鼠标悬停在<li>上时，整个元素都会突出显示蓝色，并且<li>中的文字会从黑色变为白色。我也想要它，以便当我点击<li>时，<li>变为活动状态，蓝色突出显示并从黑色文本更改为白色文本。我知道我必须使用:hover和:active属性。这是我的尝试：

HTML：

  <div class="facet">
    <ul>
      <li>
        <a href="" class="link">
          Name<span class="count">Count</span>
        </a>
      </li>
    </ul>
  </div>

CSS：

//Changes the LINK text to white
.link:hover {
    background-color: #2897C5;
    color: #ffffff;
}

//Attempt to change the entire parent element text to white and have a blue highlight, but this doesn't seem to work
.facet li:active {
    background-color: #2897C5;
    color: #ffffff;
}

//Normal CSS for the link when it is not hovered over or clicked on
.link {
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    display: block;
    color: #000;
}

//White text when you hover over the count
.count:hover {
    color: #ffffff;
}

//Normal CSS when you don't hover over the count
.count {
    position: relative;
    float: right;
    color: #bdbdbd;
}

现在我在上面的尝试中遇到了各种各样的问题。 1.当我将鼠标悬停在<li>上时，整个事物变为蓝色，这很棒，而“名称”文字也变为白色。但是，当我将鼠标悬停在<li>的那一部分上时，“计数”文本只会变为白色。 2.当我单击<li>时，元素不会将活动状态（全部是白色文本和蓝色突出显示）应用于整个元素。

关于如何改进的任何想法？谢谢！

Answer 1

这是一个更好的版本，CSS少了很多:(没有针对active-bit的解决方案，但必须在CSS之外解决）

＆＃13;

ul {
  list-style-type: none;
  }
.facet li:hover,.facet li:hover .link,.facet li:hover .count {
  background-color: #2897C5;
  color: #FFF;
  }

.link {
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    display: block;
    color: #000;
    padding: .2em;
}

.count {
    position: relative;
    float: right;
    color: red;
}

＆＃13;

  <div class="facet">
    <ul>
      <li>
        <a href="#" class="link">
          Name<span class="count">Count</span>
        </a>
      </li>
    </ul>
  </div>

＆＃13;

在整个父li元素上保持悬停/活动？

1 个答案: