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

Issue

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/

Solution

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>

Answered By - bcr666