CSS class change another CSS class

Asked

Viewed 860 times

0

The code below has almost the result I would like, however the effect only works in subsequent classes in the case of the example from class two to the three, the class two following the one may the one be within another div, so it does not work.

So the question is, how do one class change the effect of another independent of the order or what element they are? 

.um:hover ~ .dois{
  display: none;
}

.dois:hover ~ .tres{
  display: none;
}

.tres:hover ~ .um{
  display: none;
}

div {
  height: 50px;
  width: 50px;
}

.um {
  background: red;
}

.dois {
  background: green;
}

.tres {
  background: blue;
}
<div>
  <div class="um"></div>
</div>

<div class="dois"></div>
<div class="tres"></div>

javascript css

  • Making Hover in Um you can’t reach Two, not with CSS, with JS you can do. Unless you’re leaking the Hover on Father One, then you take Two, but I don’t think that’s what you want.

  • No and that, I believe that I will have to implement in JS same.

  • Yes in this situation only with JS, because the CSS does not go back and tb does not "leak the scope", like, the One Hover will not "leak" the father div and take the Two below. So just with JS itself, I’ll see if I give you an example

2 answers

0


I don’t know if it’s the most elegant way to do it, but with the script below I do two Event-listeners one in the mouseenter One to hide Two, and one to hide Tres mouseout I make a forEach to show all Divs One, Two and Three

inserir a descrição da imagem aqui

const um = document.getElementsByClassName('um')[0];
const dois = document.getElementsByClassName('dois')[0];
const tres = document.getElementsByClassName('tres')[0];

um.addEventListener('mouseenter', doisSome);
dois.addEventListener('mouseenter', tresSome);

function doisSome() {
    dois.classList.toggle('esconde');
}

function tresSome() {
    tres.classList.toggle('esconde');
}

const todos = document.querySelectorAll('.todos');

todos.forEach((x) => {
    x.addEventListener('mouseout', () => {
        todos.forEach((el) => {
            el.classList.remove('esconde');
        })
    });
})
.esconde {
    opacity: 0;
}

div {
    height: 50px;
    width: 50px;
}

.um {
    background: red;
}

.dois {
    background: green;
}

.tres {
    background: blue;
}
<div>
    <div class="todos um"></div>
</div>

<div class="todos dois"></div>
<div class="todos tres"></div>

-1

You can use !Important to set the priority and ignore whether the class is subsequent or not, as an example:

.tres {
  background: blue !important;
}

  • Did you at least test what you suggested? Or did you just kick an answer?

  • "So the question is, how do one class change the effect of another independent of the order or what element are they?" At what point the answer to the question is wrong?

  • The answer is wrong because you disregarded the HTML of the question, disregarded the context explained by the author of the question, and probably if you wanted to simulate his problem, because you would see that !important is of no use in this case.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.