如何更改：當一個元素被懸停時，元素上的懸停狀態？

Question

<img> 
<button> 

button:hover 
    color: blue 

我希望按鈕的懸停效果在img懸停時發生。這可以在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 = ""; 
    } 
} 

小提琴：Two func.Single Func.