Change the opacity and styles of different divs when the mouse passed over

Question

Change the opacity and styles of different divs when the mouse passed over

Navigation

#1 by (4 votes)
#2 by (0 votes)

1

What I want to do is when I hover over the div with class "pilot tetsuta" go to be like background (that is, play with the opacity as I say in the title), and the div with class "about-tetsuta" becomes visible, occupying all the div "pilot tetsuta" (only the image that I have as background of the div pilot tetsuta is visible). Instead the div s with class "container-name" and "container-stats" would not be visible.

The code I have made to try to do it is this:

.pilot.tetsuta{
	background-image: url('https://cloud.modyocdn.com/uploads/c8d5a62d-7b6e-4a70-a1e8-348c7044a3a2/original/tetsutav2.jpg');
	color: #FFF;
	position: relative;
}
.pilot.tetsuta:hover > .container-name,
.pilot.tetsuta:hover > .container-stats {
	opacity: 0.9;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	transition: opacity 500ms;
	color: #834c4c;
}

.pilot.tetsuta:hover > .about-tetsuta {
	opacity:1;
}

.about-tetsuta {
	position: absolute;
	top: 0;
	left: 0;
	bottom:0;
	right:0;
	color: #FFF;
	text-align: center;
	font-size: 30px;
	opacity:0;
	z-index:2;
	background:rgba(0,0,0,0.6);
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	transition: opacity 500ms;
	margin: 10px;
}

.about-tetsuta .name{
	font-family: 'Montserrat-Black';
	text-transform: uppercase;
	font-size: 36px;
	margin-top: 10px;
}

<div class=" pilot tetsuta">
<div class="about-tetsuta">
	<span class="name">Tetsuta Nagashima</span>
	<br>
	<span class="about">
	Habitual del campeonato japonés, Nagashima fue segundo en la categoría J-GP3 en 2012, sexto en la J-GP2 en 2013 a los mandos de una TSR y  vigésimo en el debut mundialista en el Gran Premio de 						Japón, dentro del equipo JiR. En 2014 disputaba 12 Grandes Premios y en 2016 participaba en dos rondas en condición de wildcard y conseguía sus primeros puntos en el campeonato aparte de 									participar	en el FIM CEV Repsol donde conseguía el subcampeonato. En 2017 forma parte del Teluru SAG Team.
	</span>
</div>
<div class="container-name">
		<span class="name">Tetsuta Nagashima</span>
		<br>
		<span class="info">Kanagawa, Japón | 02/07/92 | 175cm | 61kg</span>
</div>
<div class="container-stats tetsuta">
	<div class="stat">
		<img src="https://cloud.modyocdn.com/uploads/8f9cd150-1aaf-4dad-8456-810ff6700aa4/original/podium_icono_blanc.png"/>
		<br><br>
		<span id="podium-tetsuta">0</span> Podios
	</div>
	<div class="stat">
		<img src="https://cloud.modyocdn.com/uploads/7d47e82b-aea2-4843-a021-2841a77056c9/original/tiempo_icono_blanco.png"/>
		<br><br>
		<span id="lap-tetsuta">0</span> Vueltas rápidas
	</div>
	<div class="stat">
		<img src="https://cloud.modyocdn.com/uploads/c7654ce4-acba-4581-9e85-4801385f80cb/original/GP_icono_blanco.png"/>
		<br><br>
		<span id="gp-tetsuta">27</span> GP Disputados
	</div>
</div>
</div>

Right now I pass the mouse over and the% co_of% 0.9 is applied in all the opacity with class "pilot tetsuta", I would like that both the div with class "container-name" and the one of " status ", will remain NOT visible to the user.

After that it would be necessary to make the div "about-tetsuta" occupy all the div "pilot-tetsuta" since it does not concern me (a quick solution would be to put a div ) but then it would have than using padding for different sizes.

As it looks without hover:

How I want it to look:

As seen when I hover today:

javascript html css

asked by Lluís Puig Ferrer 30.08.2017 в 14:19

source

2 answers

0

You can use JQuery to do it. With a single hover you perform all the necessary actions.

//Hover sobre el div general tetsusa
$(".tetsusa").hover(function(){
    //Aplicamos opacidad a cada div segun quieras
    $(".tetsusa").css({opacity:0.5});
    $(".container-name").css({opacity:0.9});
    $(".container-stats").css({opacity:0.9});
});

Modify the opacities to your liking, they are example values.

In the css file leave the values as you want them to be displayed by default.

answered by 30.08.2017 в 14:42

Problem installing nuget package how do I fix this error "Notice: Trying to get property of non-object"

score 4 · Accepted Answer

The problem of applying an opacity to the parent container is that it will apply to all elements contained in it. It's kind of tedious, but it would be better to apply the CSS to the child elements instead of the parent.

Then what should be done would be:

Put a position relative to div container (".pilot.tetsuta")
When you mouse over the container, hide "container-name" and "stats" (changing its opacity as you were doing to the father)
Put absolute position on the "about" (you already have it) and occupy all the size of the container, hide it first and show it when the mouse passes over.

Something like this:

.pilot.tetsuta {
  position: relative;
  background-image: url(http://lorempixel.com/400/400/cats);
  background-repeat: no-repeat;
  background-size: cover;
}


/* esto antes aplicaba al padre, ahora sólo a ciertos descendientes */

.pilot.tetsuta:hover>.container-name,
.pilot.tetsuta:hover>.container-stats {
  opacity: 0.6;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  -ms-transition: all 500ms;
  transition: all 500ms;
  color: #834c4c;
}


/* mostramos el about cuando el ratón se ponga encima del padre */

.pilot.tetsuta:hover>.about-tetsuta {
  opacity: 1;
}


/* hacemos que ocupe todo y que esté oculto de primeras con opacity 0 */

.about-tetsuta {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  font-size: 30px;
  opacity: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
  margin: 10px;
}

.about-tetsuta .name {
  font-family: 'Montserrat-Black';
  text-transform: uppercase;
  font-size: 36px;
  margin-top: 10px;
}

<div class=" pilot tetsuta">
  <div class="about-tetsuta">
    <span class="name">Tetsuta Nagashima</span>
    <br>
    <span class="about">
	Habitual del campeonato japonés, Nagashima fue segundo en la categoría J-GP3 en 2012, sexto en la J-GP2 en 2013 a los mandos de una TSR y  vigésimo en el debut mundialista en el Gran Premio de 						Japón, dentro del equipo JiR. En 2014 disputaba 12 Grandes Premios y en 2016 participaba en dos rondas en condición de wildcard y conseguía sus primeros puntos en el campeonato aparte de 									participar	en el FIM CEV Repsol donde conseguía el subcampeonato. En 2017 forma parte del Teluru SAG Team.
	</span>
  </div>
  <div class="container-name">
    <span class="name">Tetsuta Nagashima</span>
    <br>
    <span class="info">Kanagawa, Japón | 02/07/92 | 175cm | 61kg</span>
  </div>
  <div class="container-stats tetsuta">
    <div class="stat">
      <img src="random.png" />
      <br><br>
      <span id="podium-tetsuta">0</span> Podios
    </div>
    <div class="stat">
      <img src="random.png" />
      <br><br>
      <span id="lap-tetsuta">0</span> Vueltas rápidas
    </div>
    <div class="stat">
      <img src="random.png" />
      <br><br>
      <span id="gp-tetsuta">27</span> GP Disputados
    </div>
  </div>
</div>