CODEWITHSUNDEEP
htmlcssangulartypescript
Adirtha1704
Adirtha1704

Reputation: 359

Hover over an element to put effect on another element that is not adjacent or a sibling

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>

Upvotes: 1

Views: 837

Answers (1)

Vega
Vega

Reputation: 28708

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

Upvotes: 3

Related Questions