当其他元素悬停在元素上时，如何更改：hover状态？

Question

<img>
<button>

button:hover
  color: blue

我希望将img悬停在按钮的：hover效果上。 可以在CSS中完成吗？ 如果没有，那么JS中最简单的方法是什么（jQuery很好）？

Answer 1

如果此元素具有相同的父元素，则可以使用“ +”或“〜” CSS选择器

img:hover + button{color:red}

http://jsfiddle.net/K4U9p/

Answer 2

如果元素没有相同的父代，则可以在jQuery中使用：

$img.hover(function() { //mouse enter
    $button.addClass('hover');
}, function() { //mouse leave
    $button.removeClass('hover');
});

删除事件处理程序：

$img.off('mouseenter mouseleave');

Answer 3

如果您想使用（纯）JS

var button  = document.getElementById("button");
var img     = document.getElementById("img");

img.onmouseover = modifyButton;
img.onmouseout  = resetButton;

function modifyButton() {
    button.style.color = "red";
}

function resetButton() {
    button.style.color = "";
}

或者您可以使用一个功能

img.onmouseout = modifyButton;

function modifyButton() {
    if (button.style.color != "red") {
        button.style.color = "red"
    } else {
        button.style.color = "";
    }
}

小提琴： 两个功能。 单功能。