1

I have a setup for displaying information as the user hovers over a specific element. When the specific element is hovered over, the information will appear in an adjacent div depending on which div the user hovers over. Here's the HTML...

#emp-node:hover+#emp-details {
  opacity: 1;
}

.node-details {
  opacity: 0;
}
<div class="half interactions">
  <div id="nodes">
    <div id="emp-node" class="node">EMPATHY</div>
    <div id="def-node" class="node">DEFINE</div>
    <div id="id-node" class="node">IDEATE</div>
    <div id="por-node" class="node">PROTOTYPE</div>
    <div id="test-node" class="node">TESTING</div>
  </div>
  <div id="node-text">
    <div id="emp-details" class="node-details">1</div>
    <div id="def-details" class="node-details">2</div>
    <div id="id-details" class="node-details">3</div>
    <div id="por-details" class="node-details">4</div>
    <div id="test-details" class="node-details">5</div>
  </div>
</div>

The node-details are set to an opacity of 0. When I hover over emp-node I would like emp-details to show, and the same pattern for the other divs. Here's the CSS...

#emp-node:hover + #emp-details { opacity: 1; }

I believe my issue is with the selector. I know that I need to use one but I've tried them all to no avail. Can some help me figure out how to get this to work properly? Do I need to restructure my HTML or is there a solution?

Thanks is advance.

ikiK
  • 6,328
  • 4
  • 20
  • 40
CHRIS EKE
  • 47
  • 4

2 Answers2

1

Keep in mind CSS can take you just part of the way, for example there is no parent selectors in CSS yet, you can not walk back. For stuff like that there is JS.

So for you its restructure HTML, for example you simply make them siblings, to be on same level at least:

#emp-node:hover~#emp-details {
  opacity: 1;
}

#def-node:hover~#def-details {
  opacity: 1;
}
#id-node:hover~#id-details {
  opacity: 1;
}
#test-node:hover~#test-details {
  opacity: 1;
}

.node-details {
  opacity: 0;
}
<div class="half interactions">
  <div id="nodes">
    <div id="emp-node" class="node">EMPATHY</div>
    <div id="def-node" class="node">DEFINE</div>
    <div id="id-node" class="node">IDEATE</div>
    <div id="por-node" class="node">PROTOTYPE</div>
    <div id="test-node" class="node">TESTING</div>
    <div id="emp-details" class="node-details">1</div>
    <div id="def-details" class="node-details">2</div>
    <div id="id-details" class="node-details">3</div>
    <div id="por-details" class="node-details">4</div>
    <div id="test-details" class="node-details">5</div>
</div>

Or javascript:

 document.querySelectorAll("#nodes > .node").forEach(node => {
  node.addEventListener("mouseover", function(event) {
    let id = this.id.split("-")
    //get ids
    document.querySelectorAll("#node-text > .node-details").forEach(details => {
      details.style.opacity = 0;
    });
    //on every hover set all to opacity 0
    document.querySelector("#node-text > div[id^='" + id[0] + "']").style.opacity = 1;
  });
  //set the one that id bigins with id of hover element opacity 1
});


document.querySelectorAll("#nodes > .node").forEach(node => {
  node.addEventListener("mouseover", function(event) {
    let id = this.id.split("-")
    document.querySelectorAll("#node-text > .node-details").forEach(details => {
      details.style.opacity = 0;
    });
    document.querySelector("#node-text > div[id^='" + id[0] + "']").style.opacity = 1;
  });
});
.node-details {
  opacity: 0;
}
<div class="half interactions">
  <div id="nodes">
    <div id="emp-node" class="node">EMPATHY</div>
    <div id="def-node" class="node">DEFINE</div>
    <div id="id-node" class="node">IDEATE</div>
    <div id="por-node" class="node">PROTOTYPE</div>
    <div id="test-node" class="node">TESTING</div>
  </div>
  <div id="node-text">
    <div id="emp-details" class="node-details">1</div>
    <div id="def-details" class="node-details">2</div>
    <div id="id-details" class="node-details">3</div>
    <div id="por-details" class="node-details">4</div>
    <div id="test-details" class="node-details">5</div>
  </div>
</div>

Useful topic: Is there a CSS parent selector?

ikiK
  • 6,328
  • 4
  • 20
  • 40
0

You can achieve your needs by removing the 2 div wrappers id nodes and node-text as the below :

Html`

<div class="half interactions">
 <div id="emp-node"classs="node">EMPATHY</div>
 <div id="def-node" class="node">DEFINE</div>
 <div id="id-node" class="node">IDEATE</div>
 <div id="por-node" class="node">PROTOTYPE</div>
 <div id="test-node" class="node">TESTING</div>

 <div id="emp-details" class="node-details">1</div>
 <div id="def-details" class="node-details">2</div>
 <div id="id-details" class="node-details">3</div>
 <div id="por-details" class="node-details">4</div>
 <div id="test-details" class="node-details">5</div>
</div>

Css

#emp-node:hover ~ #emp-details {
 opacity: 1;
}

.node-details {
   opacity: 0;
 }

Codepen https://codepen.io/ahamdan/pen/gOMaeNv

Ali Hamdan
  • 96
  • 5