Este es mi código donde tengo problemas para agregar estilos:
<div class="panel"> <a href = "link"> <img src="abc.jpg"> <h5>Description text</h5> </a> </div>Requisito:
Dé la bienvenida a sus correcciones en JavaScript, jQuery o CSS.
Mi intento es:
$(".panel a").hover( function() { $("h5").css("color","red"); } ); $(".panel a").hover( function() { $("img").css("color","blue"); } );El estado :hover es la mejor manera de arreglar esto para el hover sobre h5 e img
h5:hover { color: red; transition: .2s; // makes the color change smootly and not static. } img:hover + h5 { color: blue; transition: .2s; }tal vez esto es lo que quería lograr, pero le sugiero que si no necesita a para envolver todo el contenido en lugar de solo en h5 para hacer clic, reemplace h5 con a ya que su diseño actual necesita más trabajo para lograr algo simple
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>aquí está mi diseño sugerido
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>