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>