HTML - Cambiar contenido de un div

 
Vista:
sin imagen de perfil

Cambiar contenido de un div

Publicado por Cristina (2 intervenciones) el 04/11/2017 01:20:55
Buenas noches;

Esperaba que alguien pudiese ayudarme, estoy desarrollando una web y me he atascado en una cosa.

Tengo un div que actualmente contiene una imagen, un h2 y un p. Quiero que al hacer hover sobre ese div, la imagen se haga mas pequeña y que el h2 y el p desaparezcan y aparezca otro parrafo.
el codigo html está asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="col-sm-6 col-md-4 goes">
					<div id="onee" class="feature-box wow animated flipInX " data-wow-delay="0.3s">
						<img src="assets/img/design.svg" alt="" class="img-fluid">
						<div class="">
						<h2>Diseño</h2>
						<p>"La alernativa a un buen diseño es un mal diseño, no existe el no diseño"</p>
						</div>
					</div>
					<div id="twoo"class="otro">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quibusdam, magnam earum eveniet beatae eligendi aliquam quos modi nam neque, hic minima possimus ab tempore culpa a. Itaque quod, ad!</p>
					</div>
 
				</div>

Quiero que el segundo parrafo "clase otro" sustituya a los de arriba.

la css está asi:
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
.feature-box {
    padding: 30px 0px;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
 
 
 
}
.feature-box img {
    width: 30%;
    line-height: 0 !important;
    margin: 0;
    padding: 0;
    z-index: 786;
}
.feature-box p {
    padding: 0px 20px;
    font-size: 11px;
    opacity: 1;
}
.feature-box h2 {
    margin: 0;
    padding: 20px 0px;
    font-weight: 200;
    font-size: 13px;
    opacity: 1;
}
.uno{
    position:relative;
}
 
.goes{
 
    opacity: 1;
 
}
.goes:hover{
    opacity: 0;
 
}
.otro{
    position: absolute;
    opacity: 0;
}
.otro:hover{
    position: absolute;
    opacity: 1;
}

La verdad es que llevo un rato con esto y no me está dejando hacerlo. Alguien puede ayudarme?

Por cierto, hay 15 div mas como ese y hay que hacer una sustitución en cada uno con un texto diferente.

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 Pedro
Val: 277
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Cambiar contenido de un div

Publicado por Pedro (74 intervenciones) el 04/11/2017 13:50:55
Hola @Cristina yo te muestro el camino y tú investigas ( ͡° ͜ʖ ͡°)

Tienes el identificador id="onee" del div, coloca tres identificadores más para los tags img h2 y p
Ahora tienes que manejar el evento onmouseover en el identificador id="onee".

Es decir tienes que crear un script en javascript que indicas que cuando el mouse este sobre
ese div en concreto identificado por su id haga algo.

Y ¿Qué es lo que va a hacer ? Pues cuando este onmouseover primero obtener en una variable
el elemento img en otra variable el elemento h2 y lo mismo con p

Ahora ya tenemos las variables para poder trabajar con ellas, entonces lo primero cambias el atri-
buto src de la imágen más o menos así:

1
2
var logo = document.getElementById('rm');
        logo.attr('src','img/rm2.png')

En donde el atributo source oséa src le tienes que indicar el path nueva imagen asi debes hacer lo
mismo con su width and height te dejo que investigues un poco para que así practiques ¯\_(ツ)_/¯

Y finalmente debes aplicar atributos JavaScript syntax: object.style.visibility="hidden" a h2 y p

ᕦ(ò_óˇ)ᕤ Ánimo.

nQy8rY6
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
sin imagen de perfil

Cambiar contenido de un div

Publicado por Cristina (2 intervenciones) el 05/11/2017 17:49:02
Gracias por tu respuesta Pedro:

Llevo desde ayer con ello y no consigo sacarlo, serías tan amable de ponerme el script completo por favor?

Lo tengo atascado y no consigo que me salga, te agradecería mucho que pudieses echarme una mano.

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 Pedro
Val: 277
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Cambiar contenido de un div

Publicado por Pedro (74 intervenciones) el 05/11/2017 20:16:10
Te voy a dar otra pista pero ya casi te hago el código .Debes crear un archivo llamado cristina.js dentro de este archivo tenemos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Cuando cargue el documento html ejecutamos la función start
window.onload=start;
var d = document;
/*Dentro de la función start controlamos los eventos onmouseover  onmouseout   */
 
function start()
{
 d.getElementById('onee').addEventListener('"mouseover",hagoesto,false);
 d.getElementById('onee').addEventListener('mouseout',hagootracosa,false);

}
//función que se ejecutará cuando pongas el mouse encima del  div

function hagoesto ()
{ Aquí tienes que poner el código para que te modifique los atributos  que te mencioné}

//función que se ejecutará cuando quites el mouse de encima del div
function hagootracosa ()

{Aquí tienes que poner el código para que te modifique los atributos y los deje como estaban antes de onmouseover}

Cabe mencionar que desde el html debes de linkear a este script entre los head ,esto ya debes saberlo supongo
=======================================================================================>
No he comprobado posibles errores sintácticos ni nada conforme lo he pensado lo he hecho
======================================================================>
Así que te dejo el resto ᕦ(ò_óˇ)ᕤ Ánimo.
====================================>

nQy8rY6
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