CODEWITHSUNDEEP
htmlcss
user2882307
user2882307

Reputation:

change color of both text and link when hovering over element

I have a very simple element which contains some text or a link.

I want to both change the text color and link color when I am hovering over the element. I can't get it to work and I assume it's because you can't select 2 pseudo-classes. How would I get something like this to work?

css:

.test, .test a:link, .test a:visited {
  color: white;
  text-decoration: none;
}

.test:hover, .test:hover .test a:link, .test:hover .test a:visited {
   color: yellow;
   text-decoration: none;
}

html:

<div class="test">
  testtext<br>
  <a href="#">testlink</a>
</div>

Upvotes: 2

Views: 933

Answers (4)

caldera.sac
caldera.sac

Reputation: 5088

do it like this using only css 

<!DOCTYPE html>
<html>
<head>
<title>hover</title>

<style type="text/css">
  body{
    margin:0;
    padding:0;
  }

div.test{
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid black;
  color: black;
}

div.test a{
  text-decoration: none;
  color: black;
}

 .test:hover, .test:hover a{
  color: orange;
}


</style>

</head>
<body>

<div class="test">
test text<br/>
<a href="#">test link</a>
</div>




</body>



</html>

or else with little bit jquery you can do more... like this.

<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<style type="text/css">
  body{
    margin:0;
    padding:0;
  }

div.test{
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid black;
}

div.test a{
  text-decoration: none;
  color:black;
}

  


</style>

</head>
<body>

<div class="test">
test text<br/>
<a href="#">test link</a>
</div>


<script type="text/javascript">
 $(".test").mouseenter(function(){
   $(this).css({"color":"orange"});
   $("a").css({"color":"orange"})
 });

  $(".test").mouseleave(function(){
   $(this).css({"color":"black"});
   $("a").css({"color":"black"})
 });
</script>


</body>



</html>

Upvotes: 0

Bakr
Bakr

Reputation: 11

#test, #test a, #test a:visited {
  color: black;
  text-decoration: none;
}

#test:hover, #test:hover a, #test a:visited {
   color: yellow;
}
<div id="test">testtext<br><a href="#">testlink</a></div>

Upvotes: 0

Igor Ivancha
Igor Ivancha

Reputation: 3451

Just correct path to you link: 

.test,
.test a:link,
.test a:visited {
  color: white;
  text-decoration: none;
}
.test:hover,
.test:hover a:link,
.test:hover a:visited {
  color: yellow;
  text-decoration: none;
}

jsfiddle

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122057

Try this 

#test, #test a {
  color: black;
  text-decoration: none;
}

#test:hover, #test:hover a {
   color: yellow;
}
<div id="test">testtext<br><a href="#">testlink</a></div>

Upvotes: 0

Related Questions