css“onmouseover”是如何实现的？活动工作？

发布于 2024-11-06 05:43:49 字数 856 浏览 4 评论 0原文

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

败给现实 2024-11-13 05:43:49

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 标准中。不过，这通常并不重要，因为它仍然可以在任何现代浏览器中正确呈现。

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.

回复收藏 0 原文

旧瑾黎汐 2024-11-13 05:43:49

我假设您正在谈论 :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{ } 区域内使用即可。

I'm assuming you're talking about the :hover event?

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

Style:

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

Visual example: http://jsfiddle.net/zRnug/

All hover effects you want to add to your stylesheet within the #selector:hover{ } area.

All effects you want to pertain before (the default style of the element), just use within the #selector{ } area.

回复收藏 0 原文

话少心凉 2024-11-13 05:43:49

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

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

回复收藏 0 原文

多彩岁月 2024-11-13 05:43:49

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

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

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

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

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

CSS supports the :hover selector, which is triggered when you move the mouse over the item.

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

Any CSS property can be set to change on mouse-over using the :hover selector in this way.

Opacity is a CSS3 feature. It is supported by most browsers, but IE8 and lower don't support it. They do have an alternative way of doing it (using the IE-specific filter property); it's more fiddly than standard CSS and harder to get right, but it can be done.

Be aware that IE6 and lower only supports :hover on <a> elements. Other browsers (including IE7 and up) support it for all elements. My advice would be just not to support IE6 on your site, but if you do need to, there are hacks for it which can make :hover work correctly.

回复收藏 0 原文

~没有更多了~