CODEWITHSUNDEEP
htmlcss
ChriChri
ChriChri

Reputation: 275

Change text color on hover

I have a menu, which is giving me a small issue as I am only able to change the text color if I hover directly on the text. I would like the text color to change even if I don't hover directly on the text.

#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;
}
<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>

Upvotes: 1

Views: 1800

Answers (1)

Stickers
Stickers

Reputation: 78686

Try adding the following style into your CSS. Please also correct some of the values #fffff is not valid, you need another f in there.

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

Upvotes: 2

Related Questions