Hover on DIV1 change DIV2 with CSS

Asked

Viewed 2,500 times

0

If I have a #div1 and a #div2, and they are brothers, I know I can use the dial ~ to stylize the #div2 as follows:

#div1:hover ~ #div2 { /* regras */ }

Is there an equivalent selector to style the #div2 when an event #div1:hover occur in the following structure?

<div id="pai"> 
    <div id="div1"></div> 
</div>
<div id="div2"></div>
css selectors
  • 4

    Not via CSS, the rules apply to own, children of his own or own brothers. What you want is if the son be with :hover, the uncle is "red". For this only Javascript.

  • Prejudice with uncles :/ Vlw @Zuul

  • Currently it is only possible if div2 is at the same div1 level, in your case div2 is not at the same level, and so it will not be possible to apply a CSS in div2 from div1. Fountain

6 answers

3


Using the wrong markers, see this example:

#pai:first-child:hover ~ #div2 {
    background: #999
}

<div id="pai"> 
    <div id='div1'>CONTEUDO 1</div>
</div>

<div id='div'>NADA</div>
<div id='div'>NADA</div>
<div id='div'>NADA</div>

<div id='div2'>CONTEUDO 2</div>

If they don’t go relatives you cannot find, but can indicate an element that is relative and navigate by children to indicate the.

  • The only problem with this solution is that you can’t be very specific about the child element.

  • An id # seems specific enough hehe. I know this logic, I had tried with :has(#div:hover), but I was not successful because the browsers still do not support it, which led me to create the question. Very good the solution, worth!

  • I also believe there must be a way to accurately indicate using :Nth-Child(key) pulling from #parent, and yet be possible with this relation to indicate styles to elements within another div like #tio:Nth-Child(key) in condition of the first Hover, I’ll test it later if the answer goes well.

3

With javascript is possible.

Follow an example using jquery:

$("#div1").hover(function() {
  $("#div2").toggleClass("vermelho");
}, function() {
  $("#div2").toggleClass("vermelho");
});
#div1, #div2 {
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.azul {
  background-color: #00F;
}

.vermelho {
  background-color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="pai"> 
    <div id="div1" class="azul"></div> 
</div>
<div id="div2" class="vermelho"></div>

  • It’s possible, I don’t even remember what application I was using it in anymore, but I ended up solving it. Vote up for the well-thought-out answer, but n is still the kkkkk solution. The post will be here, soon we will find a way just by CSS. Thank you.

0

  • In fact here was possible with a level 3 selector.

0

For now it is not possible via css, but you can do this behavior via Javascript as previous examples. You can change the behavior of an element within the same container, or select sub-elements.

#pai div,
#div3 {
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.azul {
  background-color: #00F;
}

.vermelho {
  background-color: #F00;
}


#div1:hover + #div2,
#pai:first-child:hover + #div3,
#pai:last-child:hover + #div3
{
  background-color: #0F0 !important;
}
<div id="pai"> 
    <div id="div1" class="azul"></div> 
    <div id="div2" class="vermelho"></div>
</div>
<div id="div3" class="vermelho"></div>

-1

-4

There is indeed. Example

<div id="pai"> 
    <div id="div1"></div> 
</div>
<div id="div2"></div>

<style>
    #div1:hover #div2{
        background-color:red;
    }
</style>

  • http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling

  • This does not work like that, this selector you exemplified selects all elements with ID #div2 that are daughters of the Hover of ID #div1

  • I don’t think you understand the question.

Browser other questions tagged css selectors

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