blocks|key|219120|text|您可以通过Javascript+can't更改或更改实际的:hover选择器。但是，您可以使用mouseenter更改样式，然后在mouseleave上恢复(谢谢，@Bryan)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|219121|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript|1|https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseenter|2|https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseleave^0|T|6|1B|A|1T|A|G|5|0|1B|A|1|1T|A|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]|$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]|P|$5|I|J|K|E|$L|Q]]]]

You <a href="https://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript">can't</a> change or alter the actual <code>:hover</code> selector through Javascript. You can, however, use <a href="https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseenter" rel="noreferrer"><code>mouseenter</code></a> to change the style, and revert back on <a href="https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseleave" rel="noreferrer"><code>mouseleave</code></a> (thanks, @Bryan).

blocks|key|2872716|text|像:hover这样的伪类从不引用元素，而是引用满足样式表规则条件的任何元素。您需要编辑样式表规则、追加新规则或添加包含新:hover规则的新样式表。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2872717|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);|code-block|syntax|javascript|2872718|entityMap^0|1|6|1O|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Pseudo classes like <code>:hover</code> never refer to an element, but to any element that satisfies the conditions of the stylesheet rule. You need to edit the stylesheet rule, append a new rule, or add a new stylesheet that includes the new <code>:hover</code> rule.

<pre><code>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);
</code></pre>

blocks|key|222289|text|您可以做的是更改对象的类，并定义两个具有不同悬停属性的类。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222290|.stategood_enabled:hover++{+background-color:green}
.stategood_enabled++++++++{+background-color:black}
.stategood_disabled:hover+{+background-color:red}
.stategood_disabled+++++++{+background-color:black}|code-block|syntax|javascript|222291|我在上面找到了这个：Change+an+element's+class+with+JavaScript|offset|length|222292|function+changeClass(object,oldClass,newClass)
{
++++//+remove:
++++//object.className+=+object.className.replace(+/(?:%5E%7C\s)oldClass(?!\S)/g+,+''+);
++++//+replace:
++++var+regExp+=+new+RegExp('(?:%5E%7C\\s)'+%2B+oldClass+%2B+'(?!\\S)',+'g');
++++object.className+=+object.className.replace(+regExp+,+newClass+);
++++//+add
++++//object.className+%2B=+"+"%2BnewClass;
}

changeClass(myInput.submit,"stategood_disabled","+stategood_enabled");|222293|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript^0|0|0|A|15|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

What you can do is change the class of your object and define two classes with different hover properties. For example:

<pre><code>.stategood_enabled:hover { background-color:green}
.stategood_enabled { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled { background-color:black}
</code></pre>

And this I found on:
<a href="https://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript">Change an element&#39;s class with JavaScript</a>

<pre><code>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");
</code></pre>

blocks|key|2872747|text|如果它适合您的用途，您可以添加悬停功能，而不使用css和使用javascript中的onmouseover事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2872748|下面是一个代码片段|2872749|<div+id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover+=+function()+
{
++++this.style.backgroundColor+=+"blue";
}
</script>|code-block|syntax|javascript|2872750|entityMap^0|16|B|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

If it fits your purpose you can add the hover functionality without using css and using the <code>onmouseover</code> event in javascript 

Here is a code snippet

<pre><code>&lt;div id="mydiv"&gt;foo&lt;/div&gt;

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

blocks|key|222299|text|这实际上并不是将CSS添加到单元格，但会产生相同的效果。虽然提供了与上面其他版本相同的结果，但这个版本对我来说更直观一些，但我是一个新手，所以请相信它的价值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222300|$(".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;
++++});
});|code-block|syntax|javascript|222301|这需要将每个想要突出显示的单元格的Class设置为"hoverCell“。|222302|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is not actually adding the CSS to the cell, but gives the same effect. While providing the same result as others above, this version is a little more intuitive to me, but I'm a novice, so take it for what it's worth:

<pre><code>$(".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;
 });
});
</code></pre>

This requires setting the Class for each of the cells you want to highlight to "hoverCell".

blocks|key|224198|text|我曾经有过这样的需求，并为创建了一个小型库，用于维护CSS文档|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224199|https://github.com/terotests/css|offset|length|224200|有了这些，你就可以声明|224201|css().bind("TD:hover",+{
++++++++"background"+:+"00ff00"
++++});|code-block|syntax|javascript|224202|它使用了上面提到的技术，并试图解决跨浏览器的问题。如果由于某种原因存在像IE9这样的旧浏览器，它将限制样式标签的数量，因为旧的IE浏览器对页面上可用的样式标签的数量有一个奇怪的限制。|224203|此外，它通过仅定期更新标签来限制到标签的流量。此外，对创建动画类的支持也很有限。|224204|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

I had this need once and created a small library for, which maintains the CSS documents 

<a href="https://github.com/terotests/css" rel="nofollow">https://github.com/terotests/css</a>

With that you can state

<pre><code>css().bind("TD:hover", {
 "background" : "00ff00"
 });
</code></pre>

It uses the techniques mentioned above and also tries to take care of the cross-browser issues. If there for some reason exists an old browser like IE9 it will limit the number of STYLE tags, because the older IE browser had this strange limit for number of STYLE tags available on the page.

Also, it limits the traffic to the tags by updating tags only periodically. There is also a limited support for creating animation classes.

blocks|key|222183|text|我建议当你检测到该设备支持触摸时，将所有:hover属性替换为:active。当您以touch()身份执行此操作时，只需调用此函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|222184|+++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');
++++++++++++++}
++++++++++++}
++++++++++}
++++++++}
++++++}
++++}|code-block|syntax|javascript|222185|entityMap^0|K|6|V|7|16|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

I'd recommend to replace all <code>:hover</code> properties to <code>:active</code> when you detect that device supports touch. Just call this function when you do so as <code>touch()</code>

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

 if (rule.selectorText) {
 rule.selectorText = rule.selectorText.replace(':hover', ':active');
 }
 }
 }
 }
 }
 }
</code></pre>

blocks|key|2872868|text|声明一个全局变量：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2872869|var+td|code-block|syntax|javascript|2872870|然后选择您的guiena+pig+<td>，通过它的id获取它，如果您想要全部更改它们|offset|length|style|CODE|2872871|window.onload+=+function+()+{
++td+=+document.getElementsByTagName("td");+
}|2872872|创建一个要触发的函数和一个循环来更改所有您想要的td|2872873|function+trigger()+{
++++for(var+x+=+0;+x+<+td.length;+x%2B%2B)+{+
++++++td[x].className+=+"yournewclass";+
++++}
}|2872874|转到CSS工作表：|2872875|.yournewclass:hover+{+background-color:+#00ff00;+}|2872876|就是这样，你可以让你所有的<td>标签在悬停时获得一个background-color:+#00ff00;，直接改变它的css属性(在css类之间切换)。|2872877|entityMap^0|0|0|H|4|Q|2|0|0|O|2|0|0|0|0|D|4|R|Q|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1E|8|@$I|1F|J|1G|K|L]|$I|1H|J|1I|K|L]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$]]

Declare a global var:

<pre><code>var td
</code></pre>

Then select your guiena pig <code>&lt;td&gt;</code> getting it by its <code>id</code>, if you want to change all of them then

<pre><code>window.onload = function () {
 td = document.getElementsByTagName("td"); 
}
</code></pre>

Make a function to be triggered and a loop to change all of your desired <code>td</code>'s

<pre><code>function trigger() {
 for(var x = 0; x &lt; td.length; x++) { 
 td[x].className = "yournewclass"; 
 }
}
</code></pre>

Go to your CSS Sheet:

<pre><code>.yournewclass:hover { background-color: #00ff00; }
</code></pre>

And that is it, with this you are able to to make all your <code>&lt;td&gt;</code> tags get a <code>background-color: #00ff00;</code> when hovered by changing its css propriety directly (switching between css classes).

blocks|key|3086756|text|很抱歉发现这个页面晚了7年，但这里有一个简单得多的方法来解决这个问题(任意改变悬停样式)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3086757|HTML：|3086758|<button+id=Button>Button+Title</button>|code-block|syntax|javascript|3086759|CSS：|3086760|.HoverClass1:hover+{color:+blue+!important;+background-color:+green+!important;}
.HoverClass2:hover+{color:+red+!important;+background-color:+yellow+!important;}|3086761|JavaScript：|3086762|var+Button=document.getElementById('Button');
/*+Clear+all+previous+hover+classes+*/
Button.classList.remove('HoverClass1','HoverClass2');
/*+Set+the+desired+hover+class+*/
Button.classList.add('HoverClass1');|3086763|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Sorry to find this page 7 years too late, but here is a much simpler way to solve this problem (changing hover styles arbitrarily):

HTML:

<pre><code>&lt;button id=Button&gt;Button Title&lt;/button&gt;
</code></pre>

CSS:

<pre><code>.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}
</code></pre>

JavaScript:

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

blocks|key|219200|text|这是一个相当老的问题，所以我想我会加上一个更现代的答案。现在CSS变量得到了广泛的支持，可以使用它们来实现这一点，而不需要JS事件或!important。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|219201|以OP的例子为例：|219202|<table>
++<tr>
++++<td>Hover+1</td>
++++<td>Hover+2</td>
++</tr>
</table>|code-block|syntax|javascript|219203|我们现在可以在CSS中做到这一点：|219204|table+td:hover+{
++//+fallback+in+case+we+need+to+support+older/non-supported+browsers+(IE,+Opera+mini)
++background:+#ff0000;
++background:+var(--td-background-color);
}|219205|使用javascript添加悬停状态，如下所示：|219206|const+tds+=+document.querySelectorAll('td');
tds.forEach((td)+=>+{
++td.style.setProperty('--td-background-color',+'#00ff00');
});|219207|下面是一个有效的https://codepen.io/ybentz/pen/RwPoeqb示例|219208|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/ybentz/pen/RwPoeqb^0|1U|A|0|0|0|0|0|0|0|8|11|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|W|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

Pretty old question so I figured I'll add a more modern answer. Now that CSS variables are widely supported they can be used to achieve this without the need for JS events or <code>!important</code>.

Taking the OP's example:

<pre class="lang-html prettyprint-override"><code>&lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;Hover 1&lt;/td&gt;
 &lt;td&gt;Hover 2&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

We can now do this in the CSS:

<pre class="lang-css prettyprint-override"><code>table td:hover {
 // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
 background: #ff0000;
 background: var(--td-background-color);
}
</code></pre>

And add the hover state using javascript like so:

<pre class="lang-js prettyprint-override"><code>const tds = document.querySelectorAll('td');
tds.forEach((td) =&gt; {
 td.style.setProperty('--td-background-color', '#00ff00');
});
</code></pre>

Here's a working example <a href="https://codepen.io/ybentz/pen/RwPoeqb" rel="noreferrer">https://codepen.io/ybentz/pen/RwPoeqb</a>

blocks|key|2873001|text|您可以创建一个CSS变量，然后在JS中更改它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2873002|:root+{
++--variableName:+(variableValue);
}|code-block|syntax|javascript|2873003|为了在JS中更改它，我制作了这些方便的小函数：|2873004|var+cssVarGet+=+function(name)+{
++return+getComputedStyle(document.documentElement).getPropertyValue(name);
};|2873005|和|2873006|var+cssVarSet+=+function(name,+val)+{
++document.documentElement.style.setProperty(name,+val);
};|2873007|您可以创建任意数量的CSS变量，我在函数中没有发现任何bug；之后，您所要做的就是将其嵌入到CSS中：|2873008|table+td:hover+{
++background:+var(--variableName);
}|2873009|然后bam，一个只需要一些CSS和2个JS函数的解决方案！|2873010|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

You can make a CSS variable, and then change it in JS.

<pre class="lang-css prettyprint-override"><code>:root {
 --variableName: (variableValue);
}
</code></pre>

to change it in JS, I made these handy little functions:

<pre class="lang-js prettyprint-override"><code>var cssVarGet = function(name) {
 return getComputedStyle(document.documentElement).getPropertyValue(name);
};
</code></pre>

and

<pre class="lang-js prettyprint-override"><code>var cssVarSet = function(name, val) {
 document.documentElement.style.setProperty(name, val);
};
</code></pre>

You can make as many CSS variables as you want, and I haven't found any bugs in the functions;
After that, all you have to do is embed it in your CSS:

<pre class="lang-css prettyprint-override"><code>table td:hover {
 background: var(--variableName);
}
</code></pre>

And then bam, a solution that just requires some CSS and 2 JS functions!

blocks|key|219210|text|如果您使用轻量级html+ux+lang，check+here+an+example，请编写：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|219211|div+root
+.onmouseover+=+ev+=>+{root.style.backgroundColor='red'}
+.onmouseleave+=+ev+=>+{root.style.backgroundColor='initial'}|code-block|syntax|javascript|219212|上面的代码执行css+:hover元标记。|219213|entityMap|0|LINK|mutability|MUTABLE|url|http://katecode.herokuapp.com/^0|L|L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

If you use lightweight html ux lang, <a href="http://katecode.herokuapp.com/" rel="nofollow noreferrer">check here an example</a>, write:
<pre><code>div root
 .onmouseover = ev =&gt; {root.style.backgroundColor='red'}
 .onmouseleave = ev =&gt; {root.style.backgroundColor='initial'}
</code></pre>
The code above performes the css :hover metatag.

blocks|key|224317|text|您可以使用鼠标事件进行控制，如悬停。例如，下面的代码在您悬停该元素时使其可见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224318|var+foo+=+document.getElementById("foo");
foo.addEventListener('mouseover',function(){
+++foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
+++foo.style.display="none";
})|code-block|syntax|javascript|224319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use mouse events to control like hover.
For example, the following code is making visible when you hover that element.
<pre><code>var foo = document.getElementById(&quot;foo&quot;);
foo.addEventListener('mouseover',function(){
 foo.style.display=&quot;block&quot;;
})
foo.addEventListener('mouseleave',function(){
 foo.style.display=&quot;none&quot;;
})
</code></pre>

blocks|key|2873061|text|有一些相同的问题，使用addEventListener的事件"mousenter"，"mouseleave"：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2873062|let+DOMelement+=+document.querySelector('CSS+selector+for+your+HTML+element');

//+if+you+want+to+change+e.g+color:+
let+origColorStyle+=+DOMelement.style.color;

DOMelement.addEventListener("mouseenter",+(event)+=>+{+event.target.style.color+=+"red"+});

DOMelement.addEventListener("mouseleave",+(event)+=>+{+event.target.style.color+=+origColorStyle+})|code-block|syntax|javascript|2873063|或当光标位于DOMelement上方时的其他样式。可以通过多种方式选择DOMElement。|2873064|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Had some same problems, used addEventListener for events &quot;mousenter&quot;, &quot;mouseleave&quot;:
<pre class="lang-js prettyprint-override"><code>let DOMelement = document.querySelector('CSS selector for your HTML element');

// if you want to change e.g color: 
let origColorStyle = DOMelement.style.color;

DOMelement.addEventListener(&quot;mouseenter&quot;, (event) =&gt; { event.target.style.color = &quot;red&quot; });

DOMelement.addEventListener(&quot;mouseleave&quot;, (event) =&gt; { event.target.style.color = origColorStyle })
</code></pre>
Or something else for style when cursor is above the DOMelement.
DOMElement can be chosen by various ways.

blocks|key|2873066|text|这个很适合我|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2873067|++++++++const+useStyles+=+makeStyles({
++++++++mystyle:{
++++++++++++color:+"red",
++++++++++++FontFace:+"oblique"
++++++++},
++++++++yourStyle:{
++++++++++++backgroundColor:"green",
++++++++++++border:0,
++++++++++++color:+'white',
++++++++++++"&:hover":{
++++++++++++++++backgroundColor:"skyblue",
++++++++++++++++border:0,
++++++++++++}++++
++++++++},
++++++++
+++++++++})|code-block|syntax|javascript|2873068|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This one worked for me
<pre><code> const useStyles = makeStyles({
 mystyle:{
 color: &quot;red&quot;,
 FontFace: &quot;oblique&quot;
 },
 yourStyle:{
 backgroundColor:&quot;green&quot;,
 border:0,
 color: 'white',
 &quot;&amp;:hover&quot;:{
 backgroundColor:&quot;skyblue&quot;,
 border:0,
 } 
 },
 
 })
</code></pre>

blocks|key|222322|text|我正在研究悬停，为了能够在按钮标签中实现它们，并使悬停效果，我希望它为你工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222323|​|222324|+++<button
++++++++++++++++type="submit"
++++++++++++++++style="+background-color:cornflowerblue;+padding:7px;+border-radius:6px"
++++++++++++++++onmouseover="this.style.cssText+='background-color:#a8ff78;+padding:7px;+border-radius:6px;'"
++++++++++++++++onmouseout="this.style.cssText='background-color:cornflowerblue;+padding:7px;+border-radius:6px'"
++++++++++++++++@click="form1()"
++++++++++++>Login</button>|code-block|syntax|javascript|222325|222326|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

I was researching about hover, to be able to implement them in the button label and make the hover effect, I hope it works for you
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;button
 type="submit"
 style=" background-color:cornflowerblue; padding:7px; border-radius:6px"
 onmouseover="this.style.cssText ='background-color:#a8ff78; padding:7px; border-radius:6px;'"
 onmouseout="this.style.cssText='background-color:cornflowerblue; padding:7px; border-radius:6px'"
 @click="form1()"
 &gt;Login&lt;/button&gt;</code></pre>
</div>
</div>

blocks|key|2873089|text|您可以在css中创建类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2873090|.hover:hover+{
++++background:+#ff0000;
}|code-block|syntax|javascript|2873091|然后动态地添加它|2873092|const+columns+=+document.querySelectorAll('table+td');

for+(let+i+=+0;+i+<+columns.length;+i%2B%2B)+{
+++columns[i].classList.add('hover');
}|2873093|但是你的css和js文件应该用index.html连接|2873094|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can create a class in css
<pre><code>.hover:hover {
 background: #ff0000;
}
</code></pre>
and then add it dynamically
<pre><code>const columns = document.querySelectorAll('table td');

for (let i = 0; i &lt; columns.length; i++) {
 columns[i].classList.add('hover');
}
</code></pre>
But your css and js files should be connected in index.html

How can JavaScript change CSS <code>:hover</code> properties?
For example:
HTML
<pre><code>&lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;Hover 1&lt;/td&gt;
 &lt;td&gt;Hover 2&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
CSS
<pre><code>table td:hover {
background:#ff0000;
}
</code></pre>
How can the <code>td :hover</code> properties be modified to, say, <code>background:#00ff00</code>, with JavaScript? I know I could access the style background property using JavaScript with:
<pre><code>document.getElementsByTagName(&quot;td&quot;).style.background=&quot;#00ff00&quot;;
</code></pre>
But I don't know of a <code>.style</code> JavaScript equivalent for <code>:hover</code>.

Change :hover CSS properties with JavaScript

JavaScript如何更改CSS :hover属性？例如：HTML<table> <tr> <td>Hover 1</td> <td>Hover 2</td> </tr></table>CSStable td:hover {background:#ff0000;}如何使用JavaScript将td :...

问更改:使用JavaScript悬停CSS属性
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改:使用JavaScript悬停CSS属性EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改:使用JavaScript悬停CSS属性
EN