如何将鼠标悬停在一个元素上并将动画效果应用于其他元素 [英] How to hover over one element and apply animation effects to a different one

问题描述

有几个这样的问题，但为了清楚起见，我需要将鼠标悬停在一个元素上并进行另一个元素转换，而不仅仅是让它来回跳动（例如，

基本上，这就是我想要的： http://jsfiddle.net/jMEL7/2/
除了我需要转换时悬停在两个按钮中的任何一个上，而不是当我悬停在图像上。

Iv'e尝试使用选择器，但这不起作用。我希望我能做到这一点：

  #lb：hover {
h {
 webkit-transform：旋转（270deg）; 
 transform：rotate（270deg）
} 
} 
  

从其他的帖子，似乎JS是唯一的方法。我不知道jQuery，所以我迷路了。

解决方案

可以使用相邻的兄弟组合符（ + ），但前提是HTML中的 #h 位于 #lb 之后。 $ b $ $ p $ #lb：hover + #b {
//您的风格
}


如果 #h 和<$ c $之间还有其他元素c> #lb ，您可以使用（〜）组合符。

  #lb：hover〜#h {
 //您的风格
} 
  

例如 -

  #lb：hover〜#h {
 -webkit-transform：rotate（270deg）; 
 transform：rotate（270deg）
} 
  

DEMO

对于孩子和兄弟姐妹选择阅读

最后

  #main> a：nth-​​child（1）：hover〜a：nth-​​child（3）img {
 -webkit-transform：rotate（270deg）; 
 transform：rotate（270deg）
} 
 #main> a：nth-​​child（2）：hover〜a：nth-​​child（3）img {
 -webkit-transform：rotate（270deg）; 
 transform：rotate（270deg）
} 
  

DEMO

There are a couple questions like this, but to make it clear, I need to hover over one element and have another element transition, not simply having it pop back and forth (for example, this).

Essentially, this is what I want: http://jsfiddle.net/jMEL7/2/ Except that it needs to transition when I'm hovering over either of the two buttons and not when I'm hovering over the image.

Iv'e tried using selectors, but that doesn't work. I wish I could just do this:

    #lb:hover {
    h {
        webkit-transform:rotate(270deg);
        transform:rotate(270deg)
    }
}

From the other posts, it seems JS is the only way. I don't know jQuery, so I'm lost.

解决方案

You can use adjacent sibling combinator (+), but only if #h is after #lb in the HTML.

#lb:hover + #b {
    // your style
}

If there are other elements between #h and #lb, you can use (~) combinator.

#lb:hover ~ #h {
    // your style
}

e.g -

#lb:hover ~ #h {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}

DEMO

For child and siblings selector read

Finally

#main > a:nth-child(1):hover ~ a:nth-child(3) img {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}
#main > a:nth-child(2):hover ~ a:nth-child(3) img {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}

DEMO

这篇关于如何将鼠标悬停在一个元素上并将动画效果应用于其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！