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 agradeceria muchisimo.


<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>