将鼠标悬停在某个元素上可以对不相邻或同级的另一个元素生效

Question

I know that it is possible to achieve this using jquery but I want an approach it without jquery since I am working with an angular app. What I want to do is when I hover over an img element, I want to put text-decoration: underline in div with class title . Keep in mind however that the elements are neither siblings nor adjacent to each other. Is it possible to achieve this in any way using CSS or maybe something of Angular?

<div class='big class'>
     <div class='title'>
          <p> This is a text that I want to be underlined when hovering over the img element </p>
     </div>
     <div>..........</div>
     <div>..........</div>
     <div>..........</div>
     <img class='image' [src]="some image source"/>
</div>

Answer 1

Indeed, you don't need jquery, Angular has it all :)

You would need to add mouseneter and mouseleave events to the img tag with a property to set hovered state and change the class attribute on the title tag. The rest is in CSS

HTML:

<div class='big class'>
     <div class='title' [class.foo]="hovered">
          <p> This is a text that I want to be underlined when hovering over the img element </p>
     </div>
     <div>..........</div>
     <div>..........</div>
     <div>..........</div>
     <img class='image' (mouseenter)="hovered=true" (mouseleave)="hovered=false" 
 [src]="some image source"/>
</div>

CSS

.foo{
  text-decoration: underline;
  text-decoration-color: red
}

Demo