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:
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"); } );
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;
}
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>