HTML 요소에 마우스 오버 배경색 변경을 구현하는 가장 간단한 방법은 무엇입니까?

Question

나는 다음과 같은 스타일 :

a.button { 
    background-color: orange; 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

a.buttonMouseover { 
    background-color: darkGoldenRod; 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

그리고 다음과 같은 자바 스크립트 코드 (내 최초의 BTW) :

function backgroundChangeIn(element){ 
    if (element.className = "a.button"){element.className = "buttonMouseover";} 
} 
function backgroundChangeOut(element){ 
    if (element.className = "a.buttonMouseover"){element.className = "button";} 
} 

그리고, 마우스 커서를 가져다 대면 배경을 변경해야합니다 다음과 같은 요소 :

<a class="button" href="" onmouseover="backgroundChangeIn(this)" onmouseout="backgroundChangeOut(this)">A Button</a> 

지금까지 저에게 효과적이었습니다. 그러나 더 좋은 방법이 있는지 궁금해하고있었습니다. (모든 코드에 대한 죄송합니다)

Answer 1

은 대상 브라우저에 따라, hover 의사 태그를 사용할 수 있습니다.

a.button { 
    background-color: orange; 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

a.button:hover { 
    background-color: darkGoldenRod; 
} 

여기 w3schools의 IT에 대한 문서의 비트입니다. 그것은 원격으로 모든 현대적인 브라우저에서 잘 지원되는 것 같습니다.

호버 스타일 지정 규칙이 적용되며 호버가 우선 적용됩니다. 따라서 호버 규칙에 어떤 변경 사항을 넣어야합니다.

Answer 2

a.button, a.button:hover { 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

a.button { 
    background-color: orange; 
} 

a.button:hover { 
    background-color: darkGoldenRod; 
} 

그리고 :

<a class="button" href="">A Button</a> 

Answer 3

당신은 일을 간단하게 jQuery 같은 라이브러리를 사용할 수 있습니다.

Answer 4

sblundy의 기본 기능이 있습니다. 이를 추가하기 위해 현대의 ​​모든 브라우저에서는 < >에있는 호버 (pseudo) 요소를 사용할 수 있지만 IE6는 다른 요소에서이를 인식하지 못합니다.

IE6에서 마우스를 올릴 때 클래스 이름을 추가하려면 일종의 JavaScript가 필요합니다. 내가 jQuery를 사용하여 좋아, 다음과 같이 내가 그런 식으로 할 것이 방법입니다 : 클래스 'hoverable'그들이 이상 공중 선회하는 호버의 클래스와 모든 요소를 ​​줄 것이다

$(function(){ 
    $('.hoverable').hover(function(){ 
    $(this).addClass('hover'); 
    }, 
    function(){ 
    $(this).removeClass('hover'); 
    }) 
}) 

.