JQuery - como puedo activar/desactivar el hover en jquery

   
Vista:

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 17/11/2013 02:04:15
hola, soy novato en jquery, en mi web esta la siguiente sentencia que funciona bien:

$(window).scroll(function()
{

if ($(this).scrollTop() > 50) $('nav').addClass("fixed").fadein();

else $('nav').removeClass("fixed");
});

pero la pregunta es: en el css3 tengo esto:
contenido7 img:hover{
position:absolute;
margin-left:70px;

como puedo hacer en jquery para que cuando se cumpla el scrollTop >50 se desactive también el hover de la imagen de contenido7 y que vuelva a activarse cuando sea <50?.

muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 17/11/2013 14:01:06
Hola Mario, la manera que yo utilizo, es con una clase que añado y quito del elemento... algo como tu has echo...

No se muy bien como tienes el código HTML, pero podrias poner el estilo así:

1
2
3
4
contenido7 .fixed img:hover{
position:absolute;
margin-left:70px;
}

De esta manera, al quitar la clase fixed dejara de funcionar el evento hover. (esto funcionara dependiendo de la estructura del código html de tu web=

Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 17/11/2013 23:39:30
hola, ante todo muchas gracias por contestarme. como comentaba de jquery no tengo idea alguna, estoy aprendiendo poco a poco. creo que en la primera pergunta que hice se me olvido ponerle un punto a contenido7 es decir que es una clase. por lo que: como añado a una clase otra clase. te pongo el codigo debajo espero lo comprendas y me ayudes.
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<body >
<style type="text/css">
 *{margin:0;padding:0}
	h1{text-align:center;height:50px;line-height:50px;}
	header nav{height:40px;background:#000;width:1360px;}
	header nav ul{display:table;margin:0 auto}
		header nav ul li{list-style:none;float:left}
			header nav ul li a:link,header nav ul li a:active,header nav ul li a:visited{line-height:40px;color:#fff;text-decoration:none;padding:0 20px;display:block}
 
		.fixed{box-shadow:0 0 10px rgba(0,0,0,0.5);position:fixed;top:0;z-index:1000;}
		.contenedor{width:990px;margin:20px auto}
 
.contenido7{
		margin-top:6px;
		position:absolute;
		float:left;
	}
.contenido7 img:hover{
		margin-left:10px;      // la imagen la muevo a la derecha. y es la k kiero k n se mueva         cuando el scroll supere los 50 px.
	}
 
 
 </style>
 
<script type="text/javascript">
 
$(window).scroll(function()
		{
 
			if ($(this).scrollTop() >50) $('nav').addClass("fixed").fadein();
 
			else $('nav').removeClass("fixed");
		});
</script>
 
 
 
<header>
	<img src="../../Downloadsimagen.png" />
    		<nav>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Servicios Particulares</a></li>
				<li><a href="#">Colaboradores</a></li>
				<li><a href="#">Contactar</a></li>
			</ul>
		</nav>
	</header>
	<section>
 
		<div class="contenedor">
 
             <div class="tituloypieza">
	     	 	<div class="titulo">
                	<h2>Titulo </h2>
                    <div class="separador">
                   </div>
                	 <img src="../../Downloads/katia/imagen1.png"  />
 
                </div>
 
        	 	<div class="contenido7">
                	<img src="../../Downloads/katia/piezapared.png"  />
                </div>
             </div>
 
        	 <div class="contenido6">
           			<img src="../../Downloads/katia/imagen2.png"/>
       		  </div>
        </div>
        </section>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 18/11/2013 07:56:09
Hola Mario, seria algo así... te he marcado en negrita los cambios que he realizado... ya nos comentaras si te funciona, ok?

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Mover horizontalmente una imagen por la pantalla</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
    <style type="text/css">
        *{margin:0;padding:0}
        h1{text-align:center;height:50px;line-height:50px;}
        header nav{height:40px;background:#000;width:1360px;}
        header nav ul{display:table;margin:0 auto}
        header nav ul li{list-style:none;float:left}
        header nav ul li a:link,header nav ul li a:active,header nav ul li a:visited{line-height:40px;color:#fff;text-decoration:none;padding:0 20px;display:block}
 
        .fixed{box-shadow:0 0 10px rgba(0,0,0,0.5);position:fixed;top:0;z-index:1000;}
        .contenedor{width:990px;margin:20px auto}
 
        .contenido7{
            margin-top:6px;
            position:absolute;
            float:left;
        }
        .contenido7.hover img:hover{
            margin-left:10px;      /* la imagen la muevo a la derecha. y es la k kiero k n se mueva         cuando el scroll supere los 50 px.*/
        }
    </style>
 
    <script type="text/javascript">
        $(window).scroll(function()
        {
            if ($(this).scrollTop() >50)
            {
                $('nav').addClass("fixed");
                $("#contenido").removeClass("hover");
            }else{
                $('nav').removeClass("fixed");
                $("#contenido").addClass("hover");
            }
        });
    </script>
</head>
 
<body>
 
<header>
    <img src="../../Downloadsimagen.png" height=20 width=50 />
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios Particulares</a></li>
            <li><a href="#">Colaboradores</a></li>
            <li><a href="#">Contactar</a></li>
        </ul>
    </nav>
</header>
 
<section>
    <div class="contenedor">
        <div class="tituloypieza">
        <div class="titulo">
            <h2>Titulo </h2>
            <div class="separador">
            </div>
                <img src="../../Downloads/katia/imagen1.png" />
 
        </div>
 
        <div id="contenido" class="contenido7 hover">
            <img src="../../Downloads/katia/piezapared.png" height="500px" />
        </div>
        </div>
 
        <div class="contenido6">
            <img src="../../Downloads/katia/imagen2.png"/>
        </div>
    </div>
</section>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 18/11/2013 23:05:27
Hola y de nuevo gracias x seguir ahi, : pues bien he hecho las modificaciones k me has escrito y cada vez k le pongo a: .contenido7 .hover img:hover[.. } la imagen se queda quieta. si le quito el .hover, la imagen hace el efecto pero no se cumple la condicion claro.

Ahora, me gustaria sobre la marcha hacerte una pregunta que me esta volviendo loco y quisiera saber si se puede hacer o no, es la siguiente:

yo tengo dos clases: .contenido7 y .contenido6, ambas con imagenes diferentes. existe la manera de que cuando yo haga el efecto hover sobre la imagen del contenido7 esta se desplace a la derecha 5px( x ejemplo) pero que a la vez la imagen del contenido6 tambien se desplaze a la derecha 100px(x ejemplo)?, ambas simultaneamente.

esto sì me seria de Grandisima ayuda.
Muchas gracias x todo de verdad.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 19/11/2013 07:54:41
Hola Mario, si copias el código que yo te puse, veras que funciona... puede ser que te hayas dejado de poner el hover junto al class contenido7? en esta linea:
1
<div id="contenido" class="contenido7 hover">

Nos puedes comentar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 19/11/2013 12:34:10
hola de nuevo, pues nada que sigue sin funcionar lo he copiado tal cual y no se mueve, es muy extraño, yo lo pruebo en el navegador crome, safary, etc y nada. por que puede ser?.

por cierto, puede ser en jquery que como te dije no se casi nada, o si hubiese la forma de hacerlo en php que lo entiendo un poco mas, jajaja.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 19/11/2013 14:49:22
Hola Mario, la verdad es que no entiendo porque no te funciona...
Lo acabo de probar y funciona...

Lo que hace este código, es que cuando si baja el scroll, fija el menu y elimina el hover de la imagen...

A ti con el scroll bajado te hace el margin left en la imagen??? nos puedes mostrar un pantallazo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 19/11/2013 15:22:38
si, cuando bajo el scroll fija el menu eso lo hace perfecto, pero como te dije, si le pongo .hover a contenido7 como me dijiste la imagen no se mueve sea mayor o menor el scroll, se queda fija.

por cierto como te inserto aqui el pantallazo?.
gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 19/11/2013 18:07:38
Encima del menu del formulario donde escribe, hay un botón que pone "seleccionar Imágenes"... desde ahí las puedes añadir.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 19/11/2013 23:19:33
en la primera imagen tengo el cursor encima del espejo que es la imagen y no se desplaza y no he bajado el scroll.
en la segunda imagen el menu esta fijado correctamente y la imagen no se desplaza.

te dejo el html tal y como lo tengo. espero encuentres donde esta el fallo, como te digo cada vez k coloco .hover en contenido7 la imagen no se desplaza haya o no bajado el scroll.







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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>Documento sin título</title>
</head>
 
<body >
 <style type="text/css">
 
 
{
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*font-size:100%;*/
	/*font-family:"Lucida Sans";
	/*font: inherit;
	/*vertical-align:middle;*/
	
  
}

	body{
		/*background-color:#696969;*/
		background-color:#434343;
		/*background-color:#545454;*/
		
		width:1360px;
		margin:0px auto;
	}
	
	
*{margin:0;padding:0}
	h1{text-align:center;height:50px;line-height:50px;}
	header nav{height:40px;background:#000;width:1360px;}
	header nav ul{display:table;margin:0 auto}
	header nav ul li{list-style:none;float:left}
	header nav ul li a:link,header nav ul li a:active,header nav ul li a:visited{line-height:40px;color:#696969;text-decoration:none;padding:0 20px;display: block}
	header nav ul li a:hover{color:#fff;}
		.fixed{box-shadow:0 0 10px rgba(0,0,0,0.5);position:fixed;top:0;z-index:1000;}
		.contenedor{width:990px;margin:20px auto}
		
		
	
	
	
	
	
	
    .tituloypieza{
		width:385px;
		margin-right:5px;
		height:400px;
		float:left;
	}
	.titulo{
		overflow:hidden;
		height:318px;
		text-align:center;
		border: 1px solid #990;
	}
	.titulo img{
		text-align:justify;
		/*margin:50px;*/
	}
	
		.contenido7{
		margin-left:200px;	
		position:absolute;
		float:left;
				
		 -moz-transition: all 0.2s ease-in-out;
	 -ms-transition: all 0.1s ease-in-out;
   -webkit-transition: all 0.1s ease-in-out;
   
	}
	.contenido7 .hover img:hover{
		
		
		-webkit-transform: translateX(300px);
     -webkit-transition-delay: 0.2s;
	  -ms-transform: translateX(300px);
     -ms-transition-delay: 0.1s;
	 -moz-transform: translateX(300px);
     -moz-transition-delay: 0.1s;
	 filter: transform: translateX(300px);
	  -ms-filter: transition-delay: 0.1s;
	}
	.contenido6 {
	
	width:990px;
	height:400px;
	position:relative;
   	float: left;
	background-image:url(../../Downloads/katia/solopared2.png);
	overflow:hidden;
	
	 
   /* border: 1px solid #515750;*/
   /* box-shadow: 5px 5px 5px #999;*/
   }
   .contenido6 h3{
	   margin:25px;
	   width:250px;
	   height:300px;
	   float:left;
	   overflow:hidden;
	   }
	.contenido6 img{
		
		
		-moz-transition: all 0.3s ease-in-out;
	 -ms-transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
	}
	.contenido6 img:hover     {
		
    /* -webkit-transform: translateX(300px);
     -webkit-transition-delay: 0.1s;
	  -ms-transform: translateX(300px);
     -ms-transition-delay: 0.1s;
	 -moz-transform: translateX(300px);
     -moz-transition-delay: 0.1s;
	 filter: transform: translateX(300px);
	  -ms-filter: transition-delay: 0.1s;*/
}
 
 </style>
 
 
 
 
<script type="text/javascript">
        $(window).scroll(function()
        {
            if ($(this).scrollTop() >50)
            {
                $('nav').addClass("fixed");
                $("#contenido").removeClass("hover");
            }else{
                $('nav').removeClass("fixed");
                $("#contenido").addClass("hover");
            }
        });
    </script>
 
 
 
<header>
	<img src="../../Downloads/rococo1360.png" />
    		<nav>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Servicios Particulares</a></li>
				<li><a href="#">Colaboradores</a></li>
				<li><a href="#">Contactar</a></li>
			</ul>
		</nav>
	</header>
	<section>
 
		<div class="contenedor">
 
 
            	<div class="contenido6">
            		<h3>	Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al c</h3>
                    <div class="separador"></div>
 
        			<div id="contenido" class="contenido7 hover">
           				<img src="../../Downloads/katia/soloespejo.png"/>
       		  		 </div>
                </div>
 
   <p>Es un hechu </p>
 
        </div>
        </section>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 20/11/2013 07:59:03
Aqui tienes el error:
1
.contenido7 .hover img:hover{
Esta linea tiene que ser así:
1
.contenido7.hover img:hover{
Sin espacios entre .contenido7 y .hover, ya que los dos estilos están juntos en un mismo class.

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 20/11/2013 08:00:36
Tambien he visto que tienes un posible error en este estilo:
1
2
3
4
5
6
7
8
9
10
{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*font-size:100%;*/
    /*font-family:"Lucida Sans";
    /*font: inherit;
    /*vertical-align:middle;*/
}

Tienes que identificar a que pertenece... si es a toda la web, ponle un asterisco delante... como:
1
2
3
4
5
6
7
8
9
10
*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*font-size:100%;*/
    /*font-family:"Lucida Sans";
    /*font: inherit;
    /*vertical-align:middle;*/
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 20/11/2013 09:33:08
jajaj, vaya tonteria, pues si, era el dichoso punto, ahora funciona, genial.

Ahora como voy parte por parte te pregunto:

<div id="contenido" class="contenido7 hover">, en esta parte podrias explicarme cual es su funcion, sobre todo la parte id=contenido que es la que no entiendo.

muchasa gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 20/11/2013 09:55:28
jajaj perdon queria decir por el espacio.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

como puedo activar/desactivar el hover en jquery

Publicado por xve (557 intervenciones) el 19/11/2013 07:57:05
Sobre tu segunda pregunta, la verdad es que con estilos únicamente no se me ocurre como hacerlo... la manera con que yo lo haría seria con jquery... no se si te puede servir...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como puedo activar/desactivar el hover en jquery

Publicado por mario (23 intervenciones) el 19/11/2013 12:35:33
pues te agradeceria que me enseñaras, eso si, algo facilito no muy complicado, , es que me vendria de perillas para la web. muchisimas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar