CSS如何“onmouseover”活动工作？ [英] how does the css "onmouseover" event work?
问题描述
update-
抱歉的人，我应该提供链接到我看到效果的网站。在这里你去 - http://www.w3schools.com/Css/css_image_transparency.asp
以及我在那里看到的代码（以及此问题的基础）如下所示 -
< img src =klematis.jpgstyle =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上工作，并想知道为什么没有这些事件的文档。
onmouseover事件或CSS中的属性，即JavaScript。 CSS为鼠标悬停事件使用：hover伪类。一个简单的例子， HTML：
< div id =someid>我是一个随机div。< / div>
CSS：
#someid {
background：#fff;
}
#someid：hover {
background：＃000;
}
在本例中，当您将鼠标悬停在 someid 元素，它的背景将从白色变为黑色。
这是在CSS中处理鼠标悬停事件的正确方法。它符合符合标准，并可在所有现代浏览器中使用（以及一些较老的浏览器）。
Sidenote：它不会总是在IE6中工作，IE6只能识别：hover伪类应用于定位标记（a：hover等）。
根据对问题的更新 p>
< img src =klematis.jpgstyle =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/> gt ;
这是使用JavaScript改变样式。这是CSS的唯一一点是 style ='...'部分。 onmouseover 和 onmouseout 中的文字为JavaScript。
要在纯CSS中做你想做的事情，它应该是这样的，
< html>
< head>
< style>
img.opacity-image {
opacity：0.4;
filter：alpha（opacity = 40）; / *这是IE特定的，而不是标准投诉* /
}
img.opacity-image：hover {
opacity：1;
filter：alpha（opacity = 100）; / *再一次，'filter：'是IE特定的。 * /
}
< / style>
< / head>
< body>
...
< img src =klematis.jpgclass =opacity-image/>
....
< / body>
< / html>
opacity 是CSS3，只支持<一个href =http://caniuse.com/#search=opacity =nofollow>现代浏览器（IE6,7,8不支持它）。你可以使用 filter：... 来获得在IE中的不透明效果（虽然它不能正确处理PNG，但是因为你使用的JPG不是问题） ，但是你的代码在技术上不符合标准，因为 filter 不在CSS标准中。这通常不会太重要，因为它仍然可以在任何现代浏览器中正确呈现。
update- sorry folks, i should have provided the link to the website where i saw the effect. here you go - http://www.w3schools.com/Css/css_image_transparency.asp
and the code that i saw there (and the basis of this question) is as below -
<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" />
The original question is as below -
I was looking for rollover effects that can be done without using JS, and i stumbled upon the w3schools website teaching the opacity setting for images. In the code, there is no js involved, its just pure css.
i even tried using the same code into my webpage (which does not have any js, yet) and i noticed that the code happened to work perfectly in both chrome and IE 7.0. the code has a "onmouseover" event and another "onmouseout" event to give the hover effects based on the opacity settings.
wondering whether these effects (onmouseover and onmouseout) are - 1. pure css 2. standards compliant (xhtml 1+ and css2) 3. whether there are any hacks involved
i still cant believe these things worked on ie7, and wondering why there are no documentation on these events.
There's no such "onmouseover" event or attribute in CSS, that's JavaScript. CSS uses the ":hover" pseudo-class for mouse over events. A quick example,
HTML:
<div id="someid">I'm a random div.</div>
CSS:
#someid {
background: #fff;
}
#someid:hover {
background: #000;
}
In this example, when you hover over the #someid element, it's background will change from white to black.
This is the correct way to handle mouse over events in CSS. It is standards compliant and will work in all modern browsers (and some older browsers too).
Sidenote: It won't always work in IE6, IE6 only recognizes the ":hover" pseudo-class when it's applied to anchor tags ("a:hover", etc).
Based on the update to your question:
<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" />
That is using JavaScript to change the style. The only bit of this which is CSS is the style='...' part. The text in onmouseover and onmouseout is JavaScript.
To do what you want in pure CSS, it should be like this,
<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 is CSS3 and only supported by modern browsers (IE6,7,8 don't support it). You can use filter:... to get opacity to work in IE (although it won't handle PNGs correctly, but since you're using JPG that's not an issue), but then your code isn't technically standards compliant as "filter" is not in the CSS standard. That doesn't generally matter too much though since it'll still render correctly in any modern browser.
这篇关于CSS如何“onmouseover”活动工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
