Tengo un problema para mantener el efecto `hover` cuando selecciono una imagen. El efecto no debe cambiar cuando se selecciona o se presiono fuera; en js logro almacenar en una variable "mensaje" lo seleccionado, pero no logro que se mantenga el efecto `hover`, su apoyo por favor, estoy comenzando y les agradecería muchísimo. <body> <div class="container"> <div class="imgicon"> <label class="textlarge icono-educ "> <input type="radio" name="cajaradio" value="Educación" style="display: none;"> <p class="textradio">Educación</p> </label> </div> <div class="imgicon"> <label class="textlarge icono-empren"> <input type="radio" name="cajaradio" value="Emprendimiento" style="display: none;"> <p class="textradio1">Emprendimiento</p> </label> </div> <div class="imgicon"> <label class="textlarge icono-gasmedi"> <input type="radio" name="cajaradio" value="Gastos Medicos" style="display: none;"> <p class="textradio2">Gastos Medicos</p> </label> </div> </div> <style> .icono-educ, .icono-empren, .icono-gasmedi{ width: 80px; height: 80px; background-repeat: no-repeat; transition:all 900ms; margin: 30px; } [.icono-educ, .icono-empren, .icono-gasmedi]:hover{ color: #1A237E; width: 80px; height: 80px; transition:all 900ms; margin: 30px; } .icono-educ{ background-image: url('../icon/educ.png'); } .icono-educ:hover{ background-image: url('../icon/educa.png'); } .icono-empren{ background-image: url('../icon/emprend.png'); } .icono-empren:hover{ background-image: url('../icon/emprendi.png'); } .icono-gasmedi{ background-image: url('../icon/gastmed.png'); } .icono-gasmedi:hover{ background-image: url('../icon/gastmedi.png'); } </style> <script> $(function(){ $('input[type="radio"]').click(function(){ if ($(this).is(':checked')) var mensaje = $(this).val(); { alert("Seleccionaste: "+ mensaje); } }); }); </script> </body>