Triggering two elements on hover

I want the invisible text for "Interaction Links" and "Management Links" to appear when hovered over one or the other; hovering over one should make BOTH visible. I am able to achieve the result with Management Links only: when Management Links are hovered over, Interaction Links become visible, but when Interaction Links are hovered over, Management Links remain invisible.

ul.entry-management-links li {      padding: 0 0.25em;      display: inline;  }    ul.entry-interaction-links li {      padding: 0 0.25em;      display: inline;  }    ul.entry-management-links {      opacity: 0;  }    ul.entry-management-links:hover {      opacity: 1;  }    ul.entry-interaction-links {      opacity: 0;  }    ul.entry-interaction-links:hover {      opacity: 1;  }    ul.entry-management-links:hover + ul.entry-interaction-links {      opacity: 1;  }    ul.entry-interaction-links:hover + ul.entry-management-links {      opacity: 1;  }

<ul class="entry-management-links text-links">      <li class="link edit_entry first-item"><a href="https://www.dreamwidth.org/editjournal?journal=x&amp;itemid=1162">Edit Entry</a></li>      <li class="link edit_tags"><a href="https://www.dreamwidth.org/edittags?journal=x&amp;itemid=1162">Edit Tags</a></li>      <li class="link mem_add"><a href="https://www.dreamwidth.org/tools/memadd?journal=x&amp;itemid=1162">Add Memory</a></li>      <li class="link tell_friend"><a href="https://www.dreamwidth.org/tools/tellafriend?journal=x&amp;itemid=1162">Share This Entry</a></li>      <li class="link watch_comments">          <a              href="https://www.dreamwidth.org/manage/tracking/entry?journal=x&amp;itemid=1162"              lj_newentry_token="ajax:1618185600:3387694:162:/__rpc_esn_subs:addsub&1&3387694:1d4d25afcb39d71f39461b054b58b556a9f315fe"              js_swapname="Untrack This"              lj_newentry_etypeid="1"              lj_newentry_subid="0"              class="TrackButton"              lj_etypeid="3"              journal="x"              lj_auth_token="ajax:1618185600:3387694:162:/__rpc_esn_subs:addsub&1162&3&3387694:0a28d7f4a11ebf7d991eda3843323721b63a0458"              lj_journalid="3387694"              lj_arg1="1162"              lj_subid="0"              >Track This</a          >      </li>  </ul>  <ul class="entry-interaction-links text-links" data-quickreply-target="entry-x-1162-reply">      <li class="entry-permalink first-item"><a href="https://x.dreamwidth.org/1162.html">Link</a></li>      <li class="entry-readlink" style="display: none"><a href="https://x.dreamwidth.org/1162.html#comments" data-sing="1 comment" data-dual="2 comments" data-plur="3 comments">0 comments</a></li>      <li class="entry-replylink"><a onclick='return function(that) {return quickreply("entry-x-1162-reply", 0, "",that)}(this)' href="https://x.dreamwidth.org/1162.html?mode=reply">Reply</a></li>  </ul>

https://stackoverflow.com/questions/67051467/triggering-two-elements-on-hover April 12, 2021 at 08:48AM