更新- 抱歉，我应该提供我看到效果的网站的链接。给你 - http://www.w3schools.com/Css/css_image_transparency.asp
我在那里看到的代码(以及这个问题的基础)如下 -
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
原题如下-
我一直在寻找无需使用 JS 即可完成的翻转效果，我偶然发现了教授图像不透明度设置的 w3schools 网站。在代码中，没有涉及js，它只是纯css。
我什至尝试在我的网页中使用相同的代码(目前还没有任何 js)，我注意到该代码恰好在 chrome 和 IE 7.0 中都能完美运行。该代码有一个“onmouseover”事件和另一个“onmouseout”事件，以根据不透明度设置提供悬停效果。
想知道这些效果(onmouseover 和 onmouseout)是否 - 1.纯CSS 2. 符合标准(xhtml 1+ 和 css2) 3.是否有黑客攻击
我仍然不敢相信这些东西可以在 ie7 上运行，并且想知道为什么没有关于这些事件的文档。
最佳答案
CSS 中没有这样的“onmouseover”事件或属性，那是 JavaScript。 CSS 使用“:hover”伪类来处理鼠标悬停事件。一个简单的例子，
HTML:
<div id="someid">I'm a random div.</div>
CSS:
#someid {
background: #fff;
}
#someid:hover {
background: #000;
}
在此示例中，当您将鼠标悬停在 #someid 元素上时，它的背景将从白色变为黑色。
这是在 CSS 中处理鼠标悬停事件的正确方法。是standards compliant并且适用于所有现代浏览器(以及一些旧版浏览器)。
旁注:它在 IE6 中并不总是有效，IE6 仅在应用于 anchor 标记(“a:hover”等)时识别“:hover”伪类。
根据对您问题的更新:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
那就是用JavaScript来改变样式。唯一的 CSS 部分是 style='...' 部分。 onmouseover 和 onmouseout 中的文本是 JavaScript。
要用纯CSS做你想做的事，应该是这样的，
<html>
<head>
<style>
img.opacity-image {
opacity: 0.4;
filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
}
img.opacity-image:hover {
opacity: 1;
filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
}
</style>
</head>
<body>
...
<img src="klematis.jpg" class="opacity-image" />
....
</body>
</html>
opacity 是 CSS3，仅 modern browsers 支持(IE6、7、8不支持)。您可以使用 filter:... 让不透明度在 IE 中工作(虽然它不能正确处理 PNG，但是因为您使用的是 JPG，所以这不是问题)，但是您的代码是不符合技术标准，因为“filter”不在 CSS 标准中。不过这通常无关紧要，因为它仍然可以在任何现代浏览器中正确呈现。
关于javascript - css "onmouseover"事件如何工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5952890/