How to use the hover in a class to change another class?

Question

How to use the hover in a class to change another class?

Navigation

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

0

Next people, I have a class and another class underneath it ... but the lower class needs to be invisible until the user hovers the top class, so I put opacity: 0, and tried to put a hover in the class above for when the user passes the mouse on it the class below would get opacity: 1, but it is not working, is it possible to do this or am I doing it wrong? here are the classes, I'm using the background so for testing in the browser.

.foto-funcionario{
background: blue;
height: 400px;

}

.contato-funcionario{
height: 75px;
background: green;
opacity: 0;

}

.foto-funcionario:hover .contato-funcionario{
opacity: 1;

}

css hover

asked by anonymous 24.02.2017 / 19:03

2 answers

Generation of random numbers [duplicate] Comparative Xamarin.Forms Portable or Shared

score 1 · Answer 1

As the opacity of the parent element ( .foto-funcionario ) is 0 , all child elements will not be displayed until it is visible.

It's as if you're trying to give opacity to an element that "wears" another one with opacity 0. Like an invisibility cloak.

For the child element to appear, the parent must have opacity: 1; as well. This is how the waterfall works.

For this you would also have to add .foto-funcionario:hover {opacity:1;} to your code.

I do not know exactly what effect you want to achieve, but it might be a good idea to play with rgba() and / or transparent on background of each element.

score 0 · Answer 2

In theory what you are doing is correct. Some error probabilities I'm seeing would only occur if you do not set a width to your divs (which I do not see in your CSS) your HTML is correct in some way. Are you like this?

<div class="foto-funcionario">
    <div class="contato-funcionario">
    </div>
</div>

Try setting a width to your classes if your HTML is correct.