从CSS的函数调用JavaScript [英] Calling JavaScript from function from CSS

问题描述

有什么方法可以从css调用我的JavaScript函数？

Is there any way that I can call my JavaScript function from css?

这里是样式：

.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;
}

并且我想在锚点hover上调用JS函数。

and I want to call a JS function on anchor hover.

推荐答案

不，您不能直接从CSS触发JavaScript。

No, you can't trigger JavaScript from CSS directly.

do是使用CSS选择器以这种方式查找您要观看的元素，然后观察鼠标事件。标准事件是 mouseover 和 mouseout ，但他们可能有点棘手的工作，因为他们泡沫 mouseout ，例如，当鼠标离开任何后代元素时）。但是，通过适当的逻辑，他们不会糟糕的工作，事实上如果你有很多这些，你可能想使用 mouseover 和 mouseout 而不是下面的替代，因为你可以设置它们只是一个父容器，然后找出涉及哪个后代元素，这在一些情况下可能更简单（在其他情况下更复杂）。

What you can do 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 mouseover and 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 mouseover and mouseout rather 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).

IE提供 mouseenter 和 mouseleave 工作，因为他们不泡，但（当然）IE特定。这些是如此方便，框架已经开始支持他们，即使在浏览器不， 原型和 jQuery 提供它们，例如，如果一些其他框架也一样，我不会太惊讶。 jQuery还提供了方便的 hover 功能，这将非常接近你想要的：

IE provides mouseenter and mouseleave which 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; Prototype and jQuery provide them, for instance, and I wouldn't be too surprised if some other frameworks do as well. jQuery also provides the handy hover function, which would be very close to what you want:

// 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'
    }
 );

...这真的只是设置 mouseenter 和 mouseleave 处理程序，但仍然，奇妙简洁。

...which is really just a shortcut for setting up mouseenter and mouseleave handlers, but still, wonderfully concise.

在Prototype它非常相似： / p>

In Prototype it's quite similar:

// 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：在这两种情况下，我都使用匿名内联函数表达式，您必须使用命名函数。

(OT: In both cases, I've used anonymous inline function expressions just to avoid giving the impression you have to use named functions. I always recommend using named functions in production code, though.)

这篇关于从CSS的函数调用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！