How can I change the color of the link when the mouse hovers over li:before?

1
votes

I want to change the color of the link when I hover the mouse over the part created by li:before selector. Here is the snippet 

ul li {
  display: inline-block;
  float: right;
  margin: 10px 55px 0px 55px;
  font-size: 35px;
  position: relative;
  top: -26px;
  left: -10%;
  height: 100%;
  transition: 0.5s ease;
  font-family: impact;
  letter-spacing: 2;
}
ul li:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.`25s ease-in-out 0s;
}
a {
  text-decoration: none;
  display: block;
  color: black;
}
a:hover {
  color: red;
}
ul li:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
ul li:hover {
  background-color: yellow;
  -webkit-transition: background-color 0s;
  -moz-transition: background-color 0s;
  color: red;
}
<ul>
  <li><span><a href="">HOME</a></span>
  </li>
  <li><span><a href="">PLACES &nbsp; TO &nbsp; VISIT</a></span>
  </li>
  <li><span><a href="">STATISTICS</a></span>
  </li>
  <li><span><a href="">GALLERY</a></span>
  </li>
</ul>

Here, when the mouse is hovered over the text, the color changes and an underline appears which was there initially but hidden. That underline is made by the li:before selector. When I hover the mouse over that underline, the color of the text changes back to white (which i don't want). How can I prevent this color change?

2
htmlcss
fiddle example? - Özgür Ersil

2 Answers

2
votes

You can simply set the color of A when LI is hovered , see and test update of your selector :

/* a:hover, */ li:hover  a {
  color: red;
}


ul li {
  display: inline-block;
  float: right;
  margin: 10px 55px 0px 55px;
  font-size: 35px;
  position: relative;
  top: -26px;
  left: -10%;
  height: 100%;
  transition: 0.5s ease;
  font-family: impact;
  letter-spacing: 2;
}
ul li:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.`25s ease-in-out 0s;
}
a {
  text-decoration: none;
  display: block;
  color: black;
}
li:hover a{
  color: red;
}
ul li:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
ul li:hover {
  background-color: yellow;
  -webkit-transition: background-color 0s;
  -moz-transition: background-color 0s;
  color: red;
}
<ul>
  <li><span><a href="">HOME</a></span>
  </li>
  <li><span><a href="">PLACES &nbsp; TO &nbsp; VISIT</a></span>
  </li>
  <li><span><a href="">STATISTICS</a></span>
  </li>
  <li><span><a href="">GALLERY</a></span>
  </li>
</ul>
3
votes

That's because you aren't hovering over the link any more...so of course it loses it's hover effect. Why not use a:before instead...problem solved

ul li {
  display: inline-block;
  float: right;
  margin: 10px 55px 0px 55px;
  font-size: 35px;
  position: relative;
  top: -26px;
  left: -10%;
  height: 100%;
  transition: 0.5s ease;
  font-family: impact;
  letter-spacing: 2;
}
ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.`25s ease-in-out 0s;
}
a {
  text-decoration: none;
  display: block;
  color: black;
}
a:hover {
  color: red;
}
ul li:hover a:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
ul li:hover {
  background-color: yellow;
  -webkit-transition: background-color 0s;
  -moz-transition: background-color 0s;
  color: red;
}
<ul>
  <li><span><a href="">HOME</a></span>
  </li>
  <li><span><a href="">PLACES &nbsp; TO &nbsp; VISIT</a></span>
  </li>
  <li><span><a href="">STATISTICS</a></span>
  </li>
  <li><span><a href="">GALLERY</a></span>
  </li>
</ul>