Ocultar un evento hasta el momento de ejecutar otro
Publicado por Kike (3 intervenciones) el 25/02/2021 11:43:45
Hola mi consulta es la siguiente:
Como hago que un evento se mantenga hasta que no se seleccione otro y que al seleccionar otro se cancele el primero?
Os muestro el código que he hecho, para que os hagáis una idea de lo que quiero conseguir hacer.
MI idea es que cuando las personas se posicionen sobre el elemento que desean ver este se mantenga hasta que no seleccione otro, y que ocurra así en cada elemento, no sé si es demasiado pedir, pero me gustaría que pudiesen echarme un cable en este mundillo que vengo aprendiendo!! ;)
Como hago que un evento se mantenga hasta que no se seleccione otro y que al seleccionar otro se cancele el primero?
Os muestro el código que he hecho, para que os hagáis una idea de lo que quiero conseguir hacer.
MI idea es que cuando las personas se posicionen sobre el elemento que desean ver este se mantenga hasta que no seleccione otro, y que ocurra así en cada elemento, no sé si es demasiado pedir, pero me gustaría que pudiesen echarme un cable en este mundillo que vengo aprendiendo!! ;)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title>Tienda Online</title>
<style type="text/css">
#contenido-oculto1, #contenido-oculto2, #contenido-oculto3{display:none;}</style>
</head>
<body>
<h1>Esta Es Una Prueba de Tienda Online</h1>
<button type="button" id="mostrarOculto1">Camisetas</button>
<button type="button" id="mostrarOculto2">Calsetines</button>
<button type="button" id="mostrarOculto3">Chuminadas</button>
<div id="contenido-oculto1"><p>Este es el texto de camisetas</p></div>
<div id="contenido-oculto2"><p>Este es el texto de calsetines</p></div>
<div id="contenido-oculto3"><p>Este es el texto de chuminadas</p></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#mostrarOculto1").hover(function(){
$("#contenido-oculto1").show();
}, function(){
$("#contenido-oculto1").hide();
});
$("#mostrarOculto2").hover(function(){
$("#contenido-oculto2").show();
}, function(){
$("#contenido-oculto2").hide();
});
$("#mostrarOculto3").hover(function(){
$("#contenido-oculto3").show();
}, function(){
$("#contenido-oculto3").hide();
});
</script>
</body>
</html>
Valora esta pregunta
0
pero si alguno sabe alguna manera? a lo mejor es mejor que la mía 
