在悬停时更改文本颜色

Question

我有一个菜单，这给了我一个小问题，因为如果我直接悬停在文本上，我只能更改文本颜色。即使我没有直接悬停在文本上，我也希望文字颜色能够改变。

＆＃13;

＆＃13;

#accordian {
  width: 265px;
  color: #303030;
  float: left;
  text-transform: uppercase;
  background: #f1f1f1;
}

#accordian a {
  color: #303030;
}

#accordian a:hover {
  color: white;
}

#accordian h4 {
  font-size: 13px;
  line-height: 50px;
  margin: 0px;
  padding: 0px 23px 10px;
  cursor: pointer;
  text-transform: uppercase;
}

#accordian .main_list {
  list-style: outside;
}

.main_list:nth-child(odd):hover,
.main_list:nth-child(even):hover {
  background: #13223d;
  background: orange;
  color: blue;
}

.main_list:nth-child(even) {
  background: #f1f1f1;
}

.main_list:nth-child(odd) {
  background: #e4e4e4;
}

#accordian ul ul li a {
  color: #303030;
  text-decoration: none;
  display: block;
  font-size: 13px;
  line-height: 50px;
  padding: 0 43px;
  text-transform: uppercase;
  /* transition for smooth animation*/
  transition: all 0.15s;
}

#accordian ul ul li a:hover {
  background: #13223d;
  color: #fffff;
  border-left: 10px solid #3766b9;
}

#accordian ul ul li a {
  color: #303030;
  text-decoration: none;
  display: block;
  font-size: 13px;
  line-height: 50px;
  padding: 0 43px;
  text-transform: uppercase;
  /* transition for smooth animation*/
  transition: all 0.15s;
}

#accordian ul ul li:hover {
  background: #13223d;
  color: #fffff;
  border-left: 10px solid #3766b9;
}

＆＃13;

<div class='dashlist' id='accordian'>
  <ul>
    <li class='main_list'>
      <h4><a href=''>utställning</a></h4>
      <ul class='sublist'>
      </ul>
    </li>
    <li class='main_list'>
      <h4><a href=''>köpvillkor</a></h4>
      <ul class='sublist'>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试将以下样式添加到CSS中。还请更正某些值#fffff无效，您需要其他f。

#accordian ul li:hover a {
  color: #ffffff;
}

#accordian {
  width: 265px;
  color: #303030;
  float: left;
  text-transform: uppercase;
  background: #f1f1f1;
}

#accordian a {
  color: #303030;
}

#accordian a:hover {
  color: white;
}

#accordian h4 {
  font-size: 13px;
  line-height: 50px;
  margin: 0px;
  padding: 0px 23px 10px;
  cursor: pointer;
  text-transform: uppercase;
}

#accordian .main_list {
  list-style: outside;
}

.main_list:nth-child(odd):hover,
.main_list:nth-child(even):hover {
  background: #13223d;
  background: orange;
  color: blue;
}

.main_list:nth-child(even) {
  background: #f1f1f1;
}

.main_list:nth-child(odd) {
  background: #e4e4e4;
}

#accordian ul ul li a {
  color: #303030;
  text-decoration: none;
  display: block;
  font-size: 13px;
  line-height: 50px;
  padding: 0 43px;
  text-transform: uppercase;
  /* transition for smooth animation*/
  transition: all 0.15s;
}

#accordian ul ul li a:hover {
  background: #13223d;
  color: #ffffff;
  border-left: 10px solid #3766b9;
}

#accordian ul ul li a {
  color: #303030;
  text-decoration: none;
  display: block;
  font-size: 13px;
  line-height: 50px;
  padding: 0 43px;
  text-transform: uppercase;
  /* transition for smooth animation*/
  transition: all 0.15s;
}

#accordian ul ul li:hover {
  background: #13223d;
  color: #ffffff;
  border-left: 10px solid #3766b9;
}

#accordian ul li:hover a {
  color: #ffffff;
}

<div class='dashlist' id='accordian'>
  <ul>
    <li class='main_list'>
      <h4><a href=''>utställning</a></h4>
      <ul class='sublist'>
      </ul>
    </li>
    <li class='main_list'>
      <h4><a href=''>köpvillkor</a></h4>
      <ul class='sublist'>
      </ul>
    </li>
  </ul>