변경 : JavaScript로 CSS 속성을 호버

JavaScript를 사용하여 CSS : hover 속성을 변경하는 방법을 찾아야합니다.

예를 들어 다음 HTML 코드가 있다고 가정합니다.

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

그리고 다음 CSS 코드 :

table td:hover {
background:#ff0000;
}

JavaScript를 사용하여 <td> hover 속성을 background : # 00ff00으로 변경하고 싶습니다. JavaScript를 사용하여 스타일 배경 속성에 액세스 할 수 있습니다.

document.getElementsByTagName("td").style.background="#00ff00";

하지만 : hover에 해당하는 JavaScript를 모르겠습니다. JavaScript를 사용하여 <td>의 : hover 배경을 어떻게 변경합니까?

귀하의 도움에 감사드립니다!

유사 클래스 :hover는 요소를 참조하지 않고 스타일 시트 규칙의 조건을 충족하는 모든 요소를 ​​참조합니다. 당신은 할 필요가 스타일 시트 규칙 편집 , APPEND 새 규칙을 , 또는 새로운 포함하는 새로운 스타일 시트 추가 :hover규칙을.

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

당신은 할 수없는 변경하거나 실제 변경 :hover자바 스크립트를 통해 선택합니다. 그러나를 사용 mouseenter하여 스타일을 변경하고 다시 되돌릴 수 있습니다 mouseleave(감사합니다, @Bryan).

할 수있는 일은 개체의 클래스를 변경하고 서로 다른 호버 속성으로 두 개의 클래스를 정의하는 것입니다. 예를 들면 :

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

그리고 이것은 : JavaScript로 요소의 클래스 변경

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");

목적에 맞으면 CSS를 사용하지 않고 onmouseover자바 스크립트 에서 이벤트를 사용하지 않고도 호버 기능을 추가 할 수 있습니다.

다음은 코드 스 니펫입니다.

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>

이 페이지를 7 년 늦게 찾아서 죄송합니다. 여기에이 문제를 해결할 수있는 훨씬 더 간단한 방법이 있습니다 (호버 스타일을 임의로 변경).

HTML :

<button id=Button>Button Title</button>

CSS :

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

자바 스크립트 :

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');

꽤 오래된 질문이므로 좀 더 현대적인 답변을 추가 할 것이라고 생각했습니다. 이제 CSS 변수가 광범위하게 지원되므로 JS 이벤트 또는 !important.

OP의 예를 들면 :

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

이제 CSS에서이 작업을 수행 할 수 있습니다.

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

다음과 같이 javascript를 사용하여 hover 상태를 추가하십시오.

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

다음은 작동하는 예입니다. https://codepen.io/ybentz/pen/RwPoeqb

장치가 터치를 지원하는 것을 감지하면 모든 :hover속성 을 대체하는 것이 좋습니다 :active. 이렇게 할 때이 함수를 호출하십시오.touch()

   function touch() {
      if ('ontouchstart' in document.documentElement) {
        for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
          var sheet = document.styleSheets[sheetI];
          if (sheet.cssRules) {
            for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
              var rule = sheet.cssRules[ruleI];

              if (rule.selectorText) {
                rule.selectorText = rule.selectorText.replace(':hover', ':active');
              }
            }
          }
        }
      }
    }

한 번이 필요가 있었고 CSS 문서를 유지하는 작은 라이브러리를 만들었습니다.

https://github.com/terotests/css

그것으로 당신은 말할 수 있습니다

css().bind("TD:hover", {
        "background" : "00ff00"
    });

위에서 언급 한 기술을 사용하고 브라우저 간 문제를 해결하려고합니다. 어떤 이유로 IE9와 같은 오래된 브라우저가있는 경우 이전 IE 브라우저는 페이지에서 사용할 수있는 STYLE 태그 수에 대해 이상한 제한이 있었기 때문에 STYLE 태그 수를 제한합니다.

또한 주기적으로 만 태그를 업데이트하여 태그에 대한 트래픽을 제한합니다. 애니메이션 클래스 생성에 대한 제한된 지원도 있습니다.

전역 변수를 선언합니다.

var td

그런 다음 모두를 변경하려면으로 <td>가져 오는 귀에 나 돼지를 선택하십시오.id

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

트리거 할 수있는 기능과 원하는 모든 변경 루프 만들기 td'들

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

CSS 시트로 이동 :

.yournewclass:hover { background-color: #00ff00; }

즉, CSS 속성을 직접 변경하여 (css 클래스 간 전환) 마우스를 올렸을 때 모든 <td>태그를 가져올 수 background-color: #00ff00;있습니다.

이것은 실제로 CSS를 셀에 추가하는 것이 아니라 동일한 효과를 제공합니다. 위의 다른 버전과 동일한 결과를 제공하지만이 버전은 나에게 조금 더 직관적이지만 저는 초보자이므로 가치가있는만큼 가져 가십시오.

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

강조 표시하려는 각 셀의 클래스를 "hoverCell"로 설정해야합니다.

CSS 변수를 만든 다음 JS에서 변경할 수 있습니다.

:root {
  --variableName: (variableValue);
}

JS에서 변경하기 위해 다음과 같은 간단한 기능을 만들었습니다.

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

과

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

CSS 변수를 원하는만큼 만들 수 있지만 함수에서 버그를 찾지 못했습니다. 그 후에는 CSS에 삽입하기 만하면됩니다.

table td:hover {
  background: var(--variableName);
}

그리고 나서 약간의 CSS와 2 개의 JS 함수 만 필요한 솔루션 인 bam!

마우스 이벤트를 사용하여 호버처럼 제어 할 수 있습니다. 예를 들어 다음 코드는 해당 요소를 가리키면 표시됩니다.

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

경량 html ux lang을 사용하는 경우 여기에서 예제를 확인하고 다음을 작성하십시오.

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

위의 코드는 css : hover 메타 태그를 수행합니다.