2

更新-对不起，我应该提供我看到效果的网站的链接。给你 - 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 上有效，并且想知道为什么没有关于这些事件的文档。

4

4 回答 4

3

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 中处理鼠标悬停事件的正确方法。它符合标准，适用于所有现代浏览器（以及一些旧浏览器）。

旁注：它在 IE6 中并不总是有效，IE6 仅在应用于锚标签（“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，只有现代浏览器支持（IE6、7、8 不支持）。您可以使用filter:...不透明度在 IE 中工作（尽管它不能正确处理 PNG，但由于您使用的是 JPG，所以这不是问题），但是您的代码在技术上不符合标准，因为“ filter”不在CSS 标准。不过，这通常并不重要，因为它仍然可以在任何现代浏览器中正确呈现。

于 2011-05-10T15:58:46.280 回答
2

我假设您在谈论 :hover 事件？

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

风格：

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

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

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

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

于 2011-05-10T15:58:32.990 回答
1

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

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

于 2011-05-10T15:58:27.217 回答
1

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

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

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

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

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

于 2011-05-10T16:01:38.047 回答