How to show another div on hover which is not sibling nor child

Question

I want to show a div on hover of other dive which is not sibling nor child. Here is html structure:

<div class="parent-div">
    <div class="1st">
        1st
    </div>
    <div class="2nd">
        2nd
    </div>
    <div class="3rd">
        3rd
    </div>
    <ul>
        ul
    </ul>
    <div class="4th">
        4th
    </div>
</div>

Now I want to show 4th div on hover of 3rd div. Can anyone help me to accomplish this?

I have tried my best with CSS but not yet succeeded. If this is not possible with css then can anybody write javascript code for me as I don't know javascript.

NOTE: This is a code structure generated by Drupal CMS so I can not change the html code structure so please guide me accordingly.

But this is possible to place 4th div on place of 1st div if you find the solution like that.

where 1st, 2nd, 3rd are divs and then is ul and at last is again div. These all are under single parent div — mithow, Jun 20 '16 at 07:12
Check this, http://stackoverflow.com/questions/12969131/hover-to-div-to-change-other-elements-style its similar scenario, instead of changing colors, you should be able to set visibility via css. — Petr Adam, Jun 20 '16 at 07:14
Is it always the 4th div you want to show, or is it always the first div after a `ul`? Or the last div in the parent? — Rory McCrossan, Jun 20 '16 at 07:15
You shouldnt ask people here to write the code for you. You should at least try it yourself, fail to do and ask for advice.This question of yours is asking us to write the whole code for you. — Demeter Dimitri, Jun 20 '16 at 07:21

score 2 · Answer 1 · answered Jun 20 '16 at 07:23

In your code de div are siblings, not adjacent but siblings.

div div {
  border: solid 1px red;
}

.fourth {
  display: none;
}

.third:hover ~ .fourth {
  display: block;
}

<div class="parent-div">
  <div class="first">
    1st
  </div>
  <div class="second">
    2nd
  </div>
  <div class="third">
    3rd
  </div>
  <ul>
    ul
  </ul>
  <div class="fourth">
    4th
  </div>
</div>

PS: the classes can't start with a number

score 0 · Answer 2 · answered Jun 20 '16 at 07:23

0

try following code.. it may help. but first of it you have to add jQuery library...

$(".3rd").on('mouseover', function(){
   $(".4th").slideDown();
});

$(".3rd").on('mouseleave', function(){
   $(".4th").slideUP();
});

and also you can use .css("display", "block") property and add your css. hope it helps.

answered Jun 20 '16 at 07:23

Sonu Bamniya

1,095
1
13
29

No need for CSS with this – midda25 Jun 20 '16 at 07:26
I'm saying that instead of slideUp and slideDown we can use .css property. – Sonu Bamniya Jun 20 '16 at 07:31
Sorry what I meant to say was there is no need for jQuery with this - we have CSS properties to do the work we need – midda25 Jun 20 '16 at 07:34
He says if it is not possible with CSS can we show JavaScript – midda25 Jun 20 '16 at 07:37

score 0 · Answer 3 · answered Jun 20 '16 at 07:25

0

Try using the general sibling selector which will select any siblings that do not immediately proceed the element.

.3rd:hover ~ .4th {
    /* styles here */
}

answered Jun 20 '16 at 07:25

midda25

152
1
2
12

How to show another div on hover which is not sibling nor child

3 Answers3