2014-03-01 2 views
0
<img> 
<button> 

button:hover 
    color: blue 

버튼의 : img 위에 마우스를 올리면 호버 효과가 발생합니다. 이것이 CSS에서 할 수 있습니까? 그렇지 않다면 JS (jQuery는 괜찮습니까?)에서 가장 간단한 방법은 무엇입니까? 이 요소는 부모가 동일한 경우 요소가 같은 부모가없는 경우, 당신이 사용할 수어떻게 변경합니까? 다른 요소를 마우스로 가리키면 요소의 가리 키기 상태가 유지됩니까?

img:hover + button{color:red} 

http://jsfiddle.net/K4U9p/

답변

2

, 당신은, "+"또는 "~"CSS 선택기를 사용할 수 있습니다 jQuery를에 :

$img.off('mouseenter mouseleave'); 
:

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

이벤트 핸들러를 제거하려면

+0

을 . – akinuri

1

1

당신이 사용하려는 경우 (순수) 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 = ""; 
    } 
} 

바이올린 사용할 수 있습니다 button`는`img` 태그를 다음과`가정 Two func.Single Func.

관련 문제