Question

是否可以添加鼠标悬停效果，更改我悬停的background-color而不将其放入.css文件中？我的小提琴：http://jsfiddle.net/yikevinqu/eeu9unhm/1/我想添加一个鼠标悬停效果来改变我正在悬停的背景颜色，有没有办法在var contentMenuStyle = { ... }中执行此操作？

Answer 1

请查看React的Event System以了解处理此问题的正确方法。

从您在小提琴中设置组件的方式可能有点棘手，但它与您在onClick中所做的一样。我相信您需要onMouseOver，但可能需要onMouseEnter和onMouseOut。

从你的小提琴中，你会将这个事件监听器附加到每个td并让他们听取悬停，并根据它设置状态。然后，您将使该状态确定该单个表格单元格的backgroundColor。

因为您希望每个表格单元格更改backgroundColor，所以您无法使用contentMenuStyle变量。而是创建一个每个表格单元格可以使用的样式变量。

Answer 2

您可以更改元素的样式属性，如下所示：

document.getElementById('whatever-element').style.backgroundColor = '#somecolor'

使用jQuery，只需使用这样的选择器：

$('#whatever-element').css('background', '#somecolor');

如果你想传递一个样式对象，比如var someStyle = { ... }，只需使用与jQuery .css()方法相对应的键和值来创建对象：

var someStyle = {
    backgroundColor: 'lightblue',
    // etc.
};

$('.some-other-element').css(someStyle);

查看jQuery docs on .css()了解详情。

将鼠标悬停效果添加到样式中

2 个答案: