html - Ändra :hover CSS-egenskaper med JavaScript

Hur kan JavaScript ändra CSS :hover-egenskaper?

Till exempel:

HTML

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

CSS

table td:hover {
background:#ff0000;
}

Hur kan td :hover-egenskaperna ändras till exempelvis background:#00ff00 med JavaScript? Jag vet att jag kan komma åt stilen för bakgrundsegenskapen med JavaScript med:

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

Men jag känner inte till någon .style-motsvarighet i JavaScript för :hover.

Svar #1

Pseudo-klasser som :hover refererar aldrig till ett element, utan till vilket element som helst som uppfyller villkoren i stilmallsregeln. Du behöver redigera stilmallsregeln, lägga till en ny regel eller lägga till en ny stilmall som inkluderar den nya :hover-regeln.

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);

Svar #2

Du kan inte ändra eller modifiera den faktiska :hover-selektorn genom Javascript. Du kan däremot använda mouseenter för att ändra stilen, och återgå på mouseleave (tack, @Bryan).

Svar #3

Ganska gammal fråga, så jag tänkte att jag skulle lägga till ett mer modernt svar. Nu när CSS-variabler är allmänt stödda kan de användas för att uppnå detta utan behov av JS-händelser eller !important.

Tar OP:s exempel:

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

Vi kan nu göra detta i 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);
}

Och lägg till hover-tillståndet med JavaScript på följande sätt:

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

Här är ett fungerande exempel https://codepen.io/ybentz/pen/RwPoeqb

Svar #4

Det du kan göra är att ändra klassen på ditt objekt och definiera två klasser med olika hover-egenskaper. Till exempel:

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

Och detta hittade jag på: Ändra en elements klass med 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");

Svar #5

Sorry att hitta den här sidan 7 år för sent, men här är ett mycket enklare sätt att lösa det här problemet (ändra hover-stilar godtyckligt):

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;}

JavaScript:

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

Svar #6

Om det passar ditt syfte kan du lägga till hover-funktionen utan att använda css och använda onmouseover-händelsen i javascript

Här är ett kodsnutt

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

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

Svar #7

Du kan använda mus-händelser för att kontrollera som hovring. Till exempel gör koden nedan synlig när du hovrar över det elementet.

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

Relaterade artiklar