How do I display div depending on the link that's hovered?-CodePudding

How would display corresponding div based on the link a user hovers on?

I've managed to only get one div to work on hover the rest does not. I've tried multiple ways but looking for a pure css way to do this if it's possible.

body {background: #000;}

.hide1 {
  display: none;
}
.hide2 {
  display: none;
}
.hide3 {
  display: none;
}

    
#myDIV:hover   .hide1   .hide2   .hide3 {
  display: block;
  color: red;
}

<a id="myDIV" href="#">Test 1</a>

<a id="myDIV" href="#">Test 2</a>

<a id="myDIV" href="#">Test 3</a>


<div class="hide1">Test 11</div>

<div class="hide2">Test 22</div>

<div class="hide3">Test 33</div>

https://jsfiddle.net/x9ksuwrm/2/

CodePudding user response：

Your CSS selectors are incorrect. You are trying to interact on the hover with an element with the ID "myDIV" but such an element does not exist.

Moreover, the " " selector selects the direct next element, you need to select an undirect sibling element. For this, you need to use the "~" selector.

Here is a working solution :

body {background: #000;}

.hide1 {
  display: none;
}
.hide2 {
  display: none;
}
.hide3 {
  display: none;
}

    
#myDIV1:hover ~ .hide1,
#myDIV2:hover ~ .hide2,
#myDIV3:hover ~ .hide3 {
  display: block;
  color: red;
}

<a id="myDIV1" href="#">Test 1</a>

<a id="myDIV2" href="#">Test 2</a>

<a id="myDIV3" href="#">Test 3</a>


<div class="hide1">Test 11</div>

<div class="hide2">Test 22</div>

<div class="hide3">Test 33</div>

Thomas.

CodePudding user response：

You need to use ~ selector for that work, rather than .

Check the below code sample.

.hide1,
.hide2,
.hide3 {
  display: none;
}

#myDIV1:hover ~ .hide1 {
  display: block;
  color: red;
}
#myDIV1:hover ~ .hide2,
#myDIV1:hover ~ .hide3 {
  display: none;
}

#myDIV2:hover ~ .hide2 {
  display: block;
  color: red;
}
#myDIV2:hover ~ .hide1,
#myDIV2:hover ~ .hide3 {
  display: none;
}

#myDIV3:hover ~ .hide3 {
  display: block;
  color: red;
}
#myDIV3:hover ~ .hide1,
#myDIV3:hover ~ .hide2 {
  display: none;
}

<a id="myDIV1" href="#">Test 1</a>

<a id="myDIV2" href="#">Test 2</a>

<a id="myDIV3" href="#">Test 3</a>


<div class="hide1">Test 11</div>

<div class="hide2">Test 22</div>

<div class="hide3">Test 33</div>

CodePudding user response：

If they are next to it works

.hide1,
.hide2,
.hide3 {
  display: none;
  position: absolute;
  top: 50px;
}

.myDIV:hover .hide1 {
  display: block;
  color: red;
}

.myDIV:hover .hide2 {
  display: block;
  color: red;
}

.myDIV:hover .hide3 {
  display: block;
  color: red;
}

<a class="myDIV" href="#">Test 1</a>
<div class="hide1">Test 11</div>
<a class="myDIV" href="#">Test 2</a>
<div class="hide2">Test 22</div>
<a class="myDIV" href="#">Test 3</a>
<div class="hide3">Test 33</div>

CodePudding user response：

Here you go.

However, don't do this. You are tied to where the elements are. They are required to be in proper order.

Don't go this pure CSS way. Use JS.

body {background: #000;}

.hide1 {
  display: none;
}
.hide2 {
  display: none;
}
.hide3 {
  display: none;
}

    
#myDIV1:hover   #myDIV2   #myDIV3   .hide1,
#myDIV2:hover   #myDIV3   .hide1   .hide2,
#myDIV3:hover   .hide1   .hide2   .hide3 {
  display: block;
  color: red;
}

<a id="myDIV1" href="#">Test 1</a>

<a id="myDIV2" href="#">Test 2</a>

<a id="myDIV3" href="#">Test 3</a>


<div class="hide1">Test 11</div>

<div class="hide2">Test 22</div>

<div class="hide3">Test 33</div>

CodePudding user response：

Use a little javascript and add a class to those divs that are supposed to be hidden. Use javascript to remove the class during the hover.

$(document).ready(function() {
    $("#myDIV1, #myDIV2, #myDIV3").hover(function() {
    let index = $(this).data("index");
    $(`.hide${index}`).removeClass("hidden");
  }, function() {
    let index = $(this).data("index");
    $(`.hide${index}`).addClass("hidden");
  });
});

body {background: #000;}

.hide1, .hide2, .hide3 {
  display: block;
  color: red;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="myDIV1" data-index="1" href="#">Test 1</a>

<a id="myDIV2" data-index="2" href="#">Test 2</a>

<a id="myDIV3" data-index="3" href="#">Test 3</a>


<div class="hide1 hidden">Test 11</div>

<div class="hide2 hidden">Test 22</div>

<div class="hide3 hidden">Test 33</div>