131

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

但我不.style知道:hover.

4

17 回答 17

128

像这样的伪类:hover从不引用元素,而是引用满足样式表规则条件的任何元素。您需要编辑样式表规则附加新规则或添加包含新: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);
于 2012-07-07T01:37:49.173 回答
48

不能通过:hoverJavascript更改或更改实际的选择器。但是,您可以使用mouseenter来更改样式并恢复mouseleave(感谢@Bryan)。

于 2012-07-07T01:30:15.540 回答
13

您可以做的是更改对象的类并定义具有不同悬停属性的两个类。例如:

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

我在上面找到了这个: Change an element's class with 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");
于 2013-05-18T15:42:54.597 回答
12

很老的问题,所以我想我会添加一个更现代的答案。现在 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 添加悬停状态,如下所示:

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

这是一个工作示例https://codepen.io/ybentz/pen/RwPoeqb

于 2020-02-22T23:08:04.280 回答
12

很抱歉找到这个页面 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;}

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');
于 2019-08-18T12:58:25.653 回答
9

如果它符合您的目的,您可以在不使用 css 和onmouseover在 javascript 中使用事件的情况下添加悬停功能

这是一个代码片段

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

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>
于 2016-05-21T17:49:50.733 回答
3

这实际上并不是将 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”。

于 2016-06-05T19:57:58.540 回答
3

当您检测到该设备支持触摸时,我建议您将所有: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');
              }
            }
          }
        }
      }
    }
于 2017-07-04T12:06:28.097 回答
3

您可以使用鼠标事件进行控制,例如悬停。例如,以下代码在您悬停该元素时可见。

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})
于 2020-10-19T14:08:20.043 回答
2

我曾经有过这种需求,并为此创建了一个小型库,用于维护 CSS 文档

https://github.com/terotests/css

有了这个你可以说

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

它使用上面提到的技术,并尝试处理跨浏览器问题。如果由于某种原因存在像 IE9 这样的旧浏览器,它将限制 STYLE 标签的数量,因为旧的 IE 浏览器对页面上可用的 STYLE 标签数量有这个奇怪的限制。

此外,它通过仅定期更新标签来限制标签​​的流量。对创建动画类的支持也有限。

于 2016-09-03T10:52:05.753 回答
2

声明一个全局变量:

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>标签在悬停时获得 a 。background-color: #00ff00;

于 2017-10-23T21:45:43.187 回答
1

我正在研究悬停,以便能够在按钮标签中实现它们并制作悬停效果,我希望它对你有用

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

于 2022-02-20T21:56:22.283 回答
1

您可以制作一个 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);
}

然后是 bam,一个只需要一些 CSS 和 2 个 JS 函数的解决方案!

于 2020-05-21T23:28:20.050 回答
0

有一些相同的问题,使用 addEventListener 事件“mouseenter”,“mouseleave”:

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

或者当光标位于 DOM 元素上方时的其他样式。可以通过多种方式选择 DOMElement。

于 2021-02-20T21:21:47.633 回答
0

你可以在css中创建一个类

.hover:hover {
    background: #ff0000;
}

然后动态添加

const columns = document.querySelectorAll('table td');

for (let i = 0; i < columns.length; i++) {
   columns[i].classList.add('hover');
}

但是你的 css 和 js 文件应该在 index.html 中连接

于 2022-02-23T10:00:20.557 回答
-1

如果您使用轻量级 html ux lang,请在此处查看示例,请编写:

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

上面的代码执行 css :hover 元标记。

于 2020-07-09T14:27:50.030 回答
-1

这个对我有用

        const useStyles = makeStyles({
        mystyle:{
            color: "red",
            FontFace: "oblique"
        },
        yourStyle:{
            backgroundColor:"green",
            border:0,
            color: 'white',
            "&:hover":{
                backgroundColor:"skyblue",
                border:0,
            }    
        },
        
         })
于 2021-12-28T04:55:13.940 回答