Hola recien comienzo a unirme a la comunidad, tengo una duda, actualmente tengo una lista y quiero que cuando se pase por encima de los options de select se vayan mostrando distintas imagenes. hasta ahora lo que logre esq se muestren las imagenen el problema esta que al pasar de la opcion 1 a la 2 se muestra correctamente pero al devolverme
<html>
<head>
<title>Ejemplo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".1").hover(function(){
$(this).find("#image").toggle();
$("#image").css({"visibility":"visible","z-index":"99999"});
});
$(".2").hover(function(){
$(this).find("#image4").toggle();
$("#image4").css({"visibility":"visible","z-index":"99999"});
$(this).find("#image").toggle();
$("#image").css({"visibility":"hidden"})
});
});
</script>
<select name="lavado" id="persiana">
<option class="0" value="0">- Seleccionar - </option>
<option class="1" value="Toldos verticales manuales y motorizados">Toldos verticales manuales y motorizados</option>
<option class="2" value="Toda Cortina y persiana motorizada">Toda Cortina y persiana motorizada</option>
<option class="3" value="Luminette">Luminette</option>
</select>
<div class="ver">
<img src="3.png" alt="" id="image" class="imagenes">
<img src="4.png" alt="" id="image4" class="imagenes">
<img src="5.png" alt="" id="image5" class="imagenes">
</div>
</body>
</html>
<style>
.imagenes{
position:absolute;
visibility: hidden;
z-index:
}
.ver{
width: 410px;
height: 270px;
background: red;
margin-left:300px;
}
</style>
