Question

我如何实现这样的目标：

*:hover{
    background-color:lightblue;
}

我正在尝试在悬停在元素上时更改页面上任何元素的背景颜色。不知道为什么它不起作用。

Answer 1

工作正常http://jsfiddle.net/mendesjuan/9pta8vbz/

问题在于它突出了整个身体，因为鼠标在身体上方，因此你不会以任何不同的方式看到对孩子的突出显示。

以下示例应澄清http://jsfiddle.net/mendesjuan/9pta8vbz/1/它将突出显示正文中的项目

CSS

body *:hover{
    background-color:lightblue;
}

HTML

<p>1 <span>inside</span></p><p>2</p><p>3</p>

它会突出显示段落，但跨度的行为方式相同，因为段落也会突出显示

您正在做的事情无法单独使用CSS，您可以使用JS将CSS类添加到鼠标悬停的元素http://jsfiddle.net/mendesjuan/9pta8vbz/2/

CSS

.highlight {
    background-color:lightblue;
}

的JavaScript

// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
    e.target.className = 'highlight';
}

document.onmouseout = function(e) {
    e.target.className = '';
}

更改页面上任何元素的颜色

1 个答案: