CODEWITHSUNDEEP
javascripthtmljquerycss
johny
johny

Reputation: 53

How to add the different styles when hover on various elements under single <a> tag using JavaScript or jQuery or CSS

This is my code where am facing issue to add styles:

<div class="panel">
  <a href = "link">
    <img src="abc.jpg"> 
    <h5>Description text</h5>
  </a>
</div>

Requirement:

  1. When hover on the image then H5 text-color can changed in blue color.
  2. When hover on H5 text then the text-color can changed in red color.

Please welcome your fixes either in JavaScript or jQuery or CSS

My try is:

$(".panel a").hover( 
function() { $("h5").css("color","red"); } ); 
$(".panel a").hover( 
function() { $("img").css("color","blue"); } );

Upvotes: 2

Views: 129

Answers (2)

Jelle Stekelenburg
Jelle Stekelenburg

Reputation: 143

The :hover state is the best way to fix this for the hover over the h5 and img

h5:hover {
   color: red;
   transition: .2s; // makes the color change smootly and not static.
}

img:hover + h5 {
    color: blue;
    transition: .2s;
}

Upvotes: 1

Amir Rahman
Amir Rahman

Reputation: 1119

maybe this is what you wanted to achive but i suggest if you dont need a to wrap whole content rather than just in h5 for click then replace h5with a as your current layout needs more work to achive simple thing

a {text-decoration:none;}
h5 {text-decoration:underline;color:black;width:max-content;}

h5:hover {
  color:red;
}

img:hover + h5 {
  color:blue;
}
<div class="panel">
<a href = "link">
<img style="height:120px;" src="https://i.ibb.co/hLZrDv0/Hitman-3-artwork.png"> 
<h5>Description text</h5>
</a>
</div>

here is my suggested layout 

a{color:black;}
.panel > * {display:block;width:max-content;}
a:hover {
  color:red;
}

img:hover + a {
  color:blue;
}
<div class="panel">
<img style="height:120px;" src="https://i.ibb.co/hLZrDv0/Hitman-3-artwork.png"> 
<a href = "link">Description text</a>
</div>

Upvotes: 1

Related Questions