Single HTML link across multiple, non-contiguous words/lines?-CodePudding

Given a list with various items set as links:

<ol>
 <li> <a href="http://linkA.com"> one </li>
 <li> two </a> </li>
 <li> <a href="http://linkB.com"> three </a> </li>
 <li> four </li>
 <li> <a href="http://linkB.com"> five </a> </li>
 <li> six </li>
</ol>

And CSS to highlight links like this:

a:hover {
  background-color: yellow;
}

Is there a way to make multiple items highlight if any individual item is hovered?

And in particular, can I make non-contiguous elements highlight together?

For instance, item one and two above should both highlight in yellow, with either is hovered over. And same with item three and five above?

CodePudding user response：

This could be done with CSS only if the links were sibling elements, using the ~ operator.

.link_a:hover, .link_a:hover ~ .link_a { background: #FF0; }
.link_b:hover, .link_b:hover ~ .link_b { background: #FF0; }

<p>
  <a  href="http://linkA.com">one</a><br>
  <a  href="http://linkA.com">two</a><br>
  <a  href="http://linkB.com">three</a><br>
  four<br>
  <a  href="http://linkB.com">five</a><br>
  six
</p>

But the HTML provided by OP doesn't fit this format and so JavaScript is currently the only option for this type of functionality.

I have an example that doesn't use additional classes per link but rather compares the href attribute to determine if two links go to the same place (which seems to fit what OP is trying to achieve).

document.querySelectorAll("a").forEach(a => {
  a.addEventListener("mouseover", e => {
    document.querySelectorAll("a").forEach(b => {
      if(b.href == e.target.href) b.classList.add("hovered");
    });
  });
  a.addEventListener("mouseout", e => {
    document.querySelectorAll("a").forEach(b => {
      if(b.href == e.target.href) b.classList.remove("hovered");
    });
  });
})

.hovered { background: #FF0; }

<ol>
  <li><a href="http://linkA.com">one</a></li>
  <li><a href="http://linkA.com">two</a></li>
  <li><a href="http://linkB.com">three</a></li>
  <li>four</li>
  <li><a href="http://linkB.com">five</a></li>
  <li>six</li>
</ol>

NOTE I understand looping through all links on an event listener can impact performance, but it is dependent on the specific page/case. Given a relatively small number of links there should not be any noticeable impact to performance. However on a page with a large number of links, there may be issues.

CodePudding user response：

Done with JavaScript

document.querySelectorAll(".hover-a").forEach(element=>{
  element.addEventListener("mouseenter", ()=>{
    document.querySelectorAll(".hover-a").forEach(element=>{
      element.classList.add("is-hovered")
    })
  })
  element.addEventListener("mouseleave", ()=>{
    document.querySelectorAll(".hover-a").forEach(element=>{
      element.classList.remove("is-hovered")
    })
  })
})

document.querySelectorAll(".hover-b").forEach(element=>{
  element.addEventListener("mouseenter", ()=>{
    document.querySelectorAll(".hover-b").forEach(element=>{
      element.classList.add("is-hovered")
    })
  })
  element.addEventListener("mouseleave", ()=>{
    document.querySelectorAll(".hover-b").forEach(element=>{
      element.classList.remove("is-hovered")
    })
  })
})

a:hover, .is-hovered {
  background-color: yellow;
}

<ol>
 <li > <a href="http://linkA.com"> one </a> </li>
 <li > <a href="http://linkA.com"> two </a> </li>
 <li > <a href="http://linkB.com"> three </a> </li>
 <li> four </li>
 <li > <a href="http://linkB.com"> five </a> </li>
 <li> six </li>
</ol>