Question

最新情况：对不起，我应该提供链接到我看到效果的网站。你去吧 - 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）是否是 - 纯粹的CSS 2.符合标准（xhtml 1+和css2） 3.是否涉及任何黑客攻击

我仍然无法相信这些事情对ie7有用，并且想知道为什么没有关于这些事件的文档。

Answer 1

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只在识别“：hover”伪类时应用于锚标签（“a：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标准。这通常不重要，因为它仍然可以在任何现代浏览器中正确呈现。

Answer 2

我假设你在谈论：悬停事件？

<div id="hoverDiv"> Something should happen when you hover on me</div>

风格：

#hoverDiv:hover{ background-color:red; }

视觉示例：http://jsfiddle.net/zRnug/

要添加到#selector :hover {}区域内的样式表的所有悬停效果。

之前想要使用的所有效果（元素的默认样式），只需在#selector {}区域内使用。

Answer 3

这些是Javascript内联事件处理程序。

您可以使用:hover选择器在纯CSS中执行此操作。

Answer 4

CSS支持:hover选择器，当您将鼠标移到项目上时会触发该选择器。

.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}

可以使用:hover选择器以任何方式将任何CSS属性设置为在鼠标悬停时更改。

不透明度是CSS3的一项功能。大多数浏览器都支持它，但IE8及更低版本不支持它。他们确实有另一种方法（使用IE特定的filter属性）;它比标准CSS更加繁琐，难以做到，但可以做到。

请注意，IE6及更低版本仅支持:hover元素上的<a>。其他浏览器（包括IE7及更高版本）支持所有元素。我的建议是不在您的网站上支持IE6，但如果您确实需要，可以使用它，这可以使:hover正常工作。

css“onmouseover”事件如何运作？

4 个答案: