0

I have a link with two texts so you can click any of them to execute the link. I want to be able to underline the first text when hover any of them. So far I've only been able to underline when hover the first one.

CSS:

.title:hover{
    text-decoration: underline
}

HTML:

<p:link href:...>
   <h:outputText styleClass="title" value="Title"/>
   <h:outputText styleClass="subtitle" value="Subtitle"/>
</p:link>

What CSS code I have to write in my subtitle class to be able to do that?

Patricia Garcia Ferrandez
  • 1
  • 1
    Also, https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered – OMi Shah Aug 18 '22 at 11:54
  • I can't post an answer, but this might do the trick. Below is your CSS: `parent a { text-decoration: none; } /* prev siblings should be red */ .parent:hover a { text-decoration: underline; } .parent a:hover, .parent a:hover ~ a { text-decoration: none; }` – Crimp Aug 18 '22 at 13:32
  • Here is your HTML: `
    Link 1 Link 2 Link 3 Link 4 Link 5
    `     – Crimp Aug 18 '22 at 13:34
  • This was my source: https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector. It looks like there's really no "previous sibling" selector, but the second response in this thread has a pretty good response. – Crimp Aug 18 '22 at 13:35

1 Answers1

-1

if you know JavaScript you can use mouse events to do it with help of dom

Sohel Bepari
  • 10
  • 2