小提琴演示

Question

有几个这样的问题，但要说清楚，我需要将鼠标悬停在一个元素上并进行另一个元素转换，而不是简单地让它来回弹出（例如，this）。 / p>

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

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

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

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

Answer 1

您可以使用相邻的兄弟组合器（+），但前提是#h位于HTML中的#lb之后。

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

如果#h和#lb之间还有其他元素，您可以使用（~）组合器。

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

例如

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

DEMO

对于儿童和兄弟姐妹选择器read

最后

#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

Answer 2

我将输入标签放在img标签之前，这样我就可以使用相邻的兄弟组合器（+）

<input type="button" id="lb" value="Button">
<img src="http://playrust.com/wp-content/uploads/2013/12/rust-icon-512.png" id="h" height="130px"/>

CSS代码：

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

JS FIDDLE

Answer 3

<强> HTML

<input type="button" id="lb" value="Button">
<img src="http://playrust.com/wp-content/uploads/2013/12/rust-icon-512.png" 
     id="h" height="130px"/>

<强> CSS

#lb {
    float:right;
    color:#6C2D58;
    font-size:40px;
    font-family:Impact;
    transition: 1s;
}
#lb:hover {
    background-color:#D88E79;
}
#h {
    transition:1s;
}
#lb:hover ~ #h {
-webkit-transform:rotate(270deg);transform:rotate(270deg);
}

如何将鼠标悬停在一个元素上并将动画效果应用于另一个元素

3 个答案:

小提琴演示