Question

我知道可以使用jquery来实现此目的，但是我想要一种无需jquery的方法，因为我正在使用角度应用程序。我想做的是，当我将鼠标悬停在img元素上时，我想将text-decoration: underline放在类title的div中。但是请记住，这些元素既不是兄弟姐妹，也不是彼此相邻。是否可以使用CSS或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

实际上，您不需要jquery，Angular拥有了所有的东西：）

您需要使用属性来将mouseneter和mouseleave事件添加到img标签，以设置悬停状态并更改title标签上的class属性。其余的在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

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

1 个答案: