Question 43621 in Html Question posted in
Some basic documentation can be found here.

Targeting an element outside of its parent container – Html

Let’s say I have a section with an anchor tag. Is it possible to target another element on the page outside of that anchor tag’s parent?

For example, when a user hovers over the anchor tag in the following code, the paragraph tag inside of another container gets targeted, whether it’s changing the font size, color, whatever, etc. Any suggestions or guidance would be much appreciated!

<div class="container">
  <div>
    <ul>
      <li><a href="#">hover me</a><li>
    </ul>
  </div>
</div>

<div class="target-container">
  <p id="target-element">Target Element</p>
</div>

Seems like there has to be a way to do this with js, as css won’t work obviously since the target element is outside of the container.

Tags:

3

Answers


  1. 0

    Some ways to select elements include document.querySelector and document.getElementById.

    In this case, you can add event listeners for "mouseenter" and "mouseleave" on the anchor element, and change or revert the styles of the other element in those event handlers, respectively.

    const a = document.querySelector('.container a');
const target = document.getElementById('target-element');

// example for changing the color of the target
a.addEventListener('mouseenter', e => {
  target.style.color = 'dodgerblue'; // set new color on hover
});
a.addEventListener('mouseleave', e => {
  target.style.color = ''; // reset after
});
    <div class="container">
  <div>
    <ul>
      <li><a href="#">hover me</a><li>
    </ul>
  </div>
</div>

<div class="target-container">
  <p id="target-element">Target Element</p>
</div>
    Login or Signup to reply.
  2. 0

    In addition to the other answer and comments, this can also be achieved with just CSS.

    NOTE: The :has CSS Pseudo-class does not work in Firefox for Android.

    /* Select the element with the class of target-container that is the next sibling
   to an anchor that is being hovered over that is a descendant of a 
   div with a class of container. */
div.container:has(a:hover) ~ .target-container p {
  color:red;
  font-size:2em;
  background-color:yellow;
  border: 1px dotted grey;
}
    <div class="container">
  <div>
    <ul>
      <li><a href="#">hover me</a></li>
    </ul>
  </div>
</div>

<div class="target-container">
  <p id="target-element">Target Element</p>
</div>
    Login or Signup to reply.
  3. 0

    With modern CSS yes You can do this with has and a general sibling selector. Check browser has() support to see if it meets your needs.

    .container:has(a:hover) ~ .target-container #target-element {
  background-color:red;
}
    <div class="container">
  <div>
    <ul>
      <li><a href="#">hover me</a><li>
    </ul>
  </div>
</div>

<div class="target-container">
  <p id="target-element">Target Element</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search