Tengo un problema para mantener el efecto `hover`, busco al hacer clic que la imagen mantenga el efecto hover, y si selecciono la otra imagen se se quite el efecto de la primera imagen, y la segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso una imagen se mantendrá seleccionada. <head> <script type="text/javascript" src="js/jquery.min.js"></script> <style> .images1 { width: 80px; height: 80px; background-image: url('icono/educacionp.png'); background-repeat: no-repeat; cursor: pointer; } .images1:hover { background-image: url('icono/educacion.png'); cursor: pointer; } .clasehover { background-image: url('icono/educacion.png'); } .images2 { width: 80px; height: 80px; background-image: url('icono/Emprendimientop.png'); background-repeat: no-repeat; } .images2:hover { background-image: url('icono/Emprendimiento.png'); } .clasehover2 { background-image: url('icono/Emprendimiento.png'); } .container{ margin: 0; padding: 0; list-style: none; display: flex; justify-content:center; flex-wrap: wrap; } .container p{ margin-top:60px; font-size: 12px; cursor: pointer; } .imgicon{ display: flex; justify-content: center; cursor: pointer; margin: 30px; } .textlarge{ display: flex; } .imgicon input{ margin-top: 55px; margin-left: -30px; } </style> </head> <body> <div class="container"> <div class="imgicon images1"> <label class="textlarge icono-educ"> <input type="radio" name="cajaradio" value="Educación" style=""> <p class="textradio">Educación</p> </label> </div> <div class="imgicon images2"> <label class="textlarge icono-empren"> <input type="radio" name="cajaradio" value="Emprendimiento" style=""> <p class="textradio1">Emprendimiento</p> </label> </div> </div> <script> $('input[type="radio"]').click(function(){ if ($(this).is(':checked')) // var mensaje = $(this).val(); { //alert("Seleccionaste: "+ mensaje); if( $('.images1').hasClass('clasehover')) { $('.images1').removeClass('clasehover'); } else{ $('.images1').addClass('clasehover'); } } }); </script> </body>