CSS 버튼을 자바 스크립트 버튼으로 전환

Question

자바 스크립트를 사용하여 마우스를 올리면 변경되는 요소를 토글 할 수 있습니까? 나는 div가 두 개의 다른 상태에서 바뀌도록하는 버튼을 만들고 싶습니다. (1) div가 끌리지 않았을 때, (2) div가 떠있을 때.

어떻게 할 수 있습니까?

감사합니다.

TC는

Answer 1

<input type = 'button' value = 'change div' onmouseover = 'javascript:getElementById('DivId').className = newStyleClass' onmouseout = 'javascript:getElementById('DivId').className = newStyleClass' />

Answer 2

당신이 jQuery를 사용하여 시도 할 수 있습니다 그것은 훨씬 쉽게 만들 것입니다. $ ('# divId'). css ('hover', function (index) {whatever;});

내가 좋아하는 것을 좋아하지 않는다면 나는 직선 j에서 그것을하는 방법에 관한 나의 두뇌를 찰 수있다.

Answer 3

혼자 CSS와 함께이 일을 확실히 할 수있다 :

div { background-color:#000; } 
div:hover { background-color:#cc0000; } 

당신은 배경 색상이 검은 색에서 빨간색으로 변합니다 div 위로 마우스를 이동합니다.

제 생각에는 자바 스크립트를 사용하면 과도합니다. 의사 선택기 :hover으로 꽤 정교한 작업을 수행 할 수 있습니다. 당신이 볼 수 있듯이

<div>I'm just a div <h1>I'm just an h1</h1></div>

div h1 { font-size:10px; font-weight:normal; } 
div:hover { border:1px dotted #000; } 
div:hover h1 { font-size:32px; font-weight:bold; color:#cc0000; } 

, 우리는뿐만 아니라의 스타일에 공중 선회 요소에 위와 같이 규칙에 :hover 선택기를 사용하지만, 자식 요소뿐만 아니라 수 있습니다 :이 마크 업 (및 CSS)을 고려 . 이 전제는 중첩 된 ul보다 조금 더 많은 것을 사용하여 많은 "플라이 아웃"탐색이 이루어지는 방식입니다.

Answer 4

가능합니다.

jQuery를 :

$("#mydiv").hover(function() 
{ 
    $(this).toggleClass("active"); 
    // or $(this).toggle(); 
    } 
); 

표준 자바 스크립트 :

당신이 뭔가를 할 수

function toggle(obj) 
{ 
    var item = document.getElementById(obj); 
    if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; } 
    else { item.style.visibility = 'visible'; } 
} 

HTML :

<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');" id="mydiv">Hover</div>