从 CSS 的函数调用 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2446598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling JavaScript from function from CSS
提问by BreakHead
Is there any way that I can call my JavaScript function from css?
有什么方法可以从 css 调用我的 JavaScript 函数？
For ex here is style:
例如，这里是风格：
.first-nav li a:hover,
.first-nav li.hover a {
margin:-3px 0 -1px;
height:30px;
position:relative;
background:url(../images/nav-hover.jpg) no-repeat;
}
and I want to call a JS function on anchor hover.
我想在锚点悬停时调用 JS 函数。
回答by T.J. Crowder
No, you can't trigger JavaScript from CSS directly.
不，您不能直接从 CSS 触发 JavaScript。
What you cando is use CSS selectors to find the elements you want to watch in this way, and then watch for mouse events. The standard events are mouseoverand mouseout, but they can be a bit tricky to work with because they bubble (you get mouseout, for instance, whenever the mouse leaves any descendant element). With appropriate logic, though, they're not to bad to work with, and in fact if you have lots of these, you probably want to use mouseoverand mouseoutrather than the alternative below because you can set them on just a parent container and then work out which descendant element is involved, which can be simpler in some cases (and more complicated in others).
你可以做的就是使用 CSS 选择器以这种方式找到你想要观看的元素，然后观看鼠标事件。标准事件是mouseoverand mouseout，但使用它们可能有点棘手，因为它们会冒泡（mouseout例如，只要鼠标离开任何后代元素，就会得到）。但是，如果使用适当的逻辑，使用它们mouseover并mouseout不会太糟糕，而且实际上，如果您有很多这些，您可能想要使用and而不是下面的替代方案，因为您可以将它们设置在父容器上然后工作找出涉及哪个后代元素，这在某些情况下可能更简单（在其他情况下可能更复杂）。
IE provides mouseenterand mouseleavewhich are much easier to work with because they don't bubble, but (of course) IE-specific. These are so handy that frameworks are starting to support them even in browsers that don't; Prototypeand jQueryprovide them, for instance, and I wouldn't be too surprised if some other frameworks do as well. jQuery also provides the handy hoverfunction, which would be very close to what you want:
IE 提供mouseenter和mouseleave哪个更容易使用，因为它们不会冒泡，但（当然）特定于 IE。这些非常方便，以至于框架开始支持它们，即使在不支持的浏览器中也是如此；例如，Prototype和jQuery提供了它们，如果其他一些框架也提供它们，我也不会感到太惊讶。jQuery 还提供了方便的hover功能，它非常接近您想要的功能：
// jQuery
$(".first-nav li a").hover(
function(event) {
// The mouse has entered the element, can reference the element via 'this'
},
function (event) {
// The mouse has left the element, can reference the element via 'this'
}
);
...which is really just a shortcut for setting up mouseenterand mouseleavehandlers, but still, wonderfully concise.
...这实际上只是设置mouseenter和mouseleave处理程序的快捷方式，但仍然非常简洁。
In Prototype it's quite similar:
在 Prototype 中，它非常相似：
// Prototype
$$(".first-nav li a")
.invoke("observe", "mouseenter", function(event) {
// The mouse has entered the element, can reference the element via 'this'
})
.invoke("observe", "mouseleave", function(event) {
// The mouse has left the element, can reference the element via 'this'
});
(OT: In both cases, I've used anonymous inline function expressions just to avoid giving the impression you have to use named functions. I alwaysrecommend using named functions in production code, though.)
（OT：在这两种情况下，我都使用了匿名内联函数表达式，只是为了避免给人留下必须使用命名函数的印象。不过，我始终建议在生产代码中使用命名函数。）
回答by Quentin
No.
不。
(Well, Microsoft Expressions and Mozilla Bindings might allow it, but both are proprietary and should be avoided)
（好吧，Microsoft Expressions 和 Mozilla Bindings 可能允许它，但两者都是专有的，应该避免）
Assign your event handlers from JavaScript. Libraries such as YUI and jQuery allow you to pick elements to apply them to using CSS selectors. Event delegationallows you to handle events on elements without having to assign to each one explicitly (which is handy if you are adding them to the document after it loads).
从 JavaScript 分配您的事件处理程序。YUI 和 jQuery 等库允许您选择元素以将它们应用于使用 CSS 选择器。事件委托允许您处理元素上的事件，而无需显式分配给每个元素（如果您在加载后将它们添加到文档中，这会很方便）。
回答by ant
Why would you call it from your css, if you want "to call a JS function on anchor hover", put this in your tag :
你为什么要从你的 css 中调用它，如果你想“在锚点悬停时调用 JS 函数”，把它放在你的标签中：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").hover(function(){
myFunctionInvoke();
});
});
</script>
or if you have particular anchor in mind just change the selector
或者如果您有特定的锚点，只需更改选择器
回答by Cornelius
Because it's more logical to do it from CSS.
因为从 CSS 中做到这一点更合乎逻辑。
If one wants to make links click on hover, it's an aesthetic quality and should be handled with CSS. For example:
如果你想让链接在悬停时点击，这是一种美学品质，应该用 CSS 处理。例如：
#header_menu li a:hover{
color:white;
js:click();
}
回答by N3Cr0M0rPh
Actually. Yes you can. Just use javascript: in the background-url like this:
实际上。是的你可以。只需在 background-url 中使用 javascript: 像这样：
<STYLE type="text/css">BODY{background:url("javascript:yourFunction();")}</STYLE>
Not entirely sure if this will work though.
不完全确定这是否会奏效。
Cheers!
干杯!
