从CSS调用JavaScript函数

前端之家收集整理的这篇文章主要介绍了从CSS调用JavaScript函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有什么办法可以从css调用我的JavaScript函数吗?

对于ex这里是风格:

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

我想在锚悬停上调用JS函数

解决方法

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

您可以做的是使用CSS选择器以这种方式查找要观看的元素,然后观察鼠标事件。标准事件是鼠标悬停和鼠标悬停,但是它们可能有点棘手,因为它们是泡沫的(例如,当鼠标离开任何后代元素时,您会得到mouSEOut)。但是,使用适当的逻辑,它们并不是糟糕的工作,实际上如果你有很多这样的事情,你可能想使用鼠标悬停和鼠标悬停,而不是下面的替代方法,因为你可以将它们设置在父容器上,然后计算出哪个后代元素涉及到,这在某些情况下可能更简单(在其他情况下更复杂)。

IE提供的mouseenter和mouseleave是更容易使用,因为它们不起泡,但(当然)IE特定的。这些都很方便,即使在没有的浏览器中,框架也开始支持它们;例如,PrototypejQuery提供了它们,如果其他一些框架也是如此,我不会感到惊讶。 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'
    }
 );

…这真的只是一个设置mouseenter和mouseleave处理程序的捷径,但仍然非常简洁。

在原型中,它非常相似:

// 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:在这两种情况下,我使用匿名内联函数表达式,以避免给出必须使用命名函数的印象,我总是建议在生产代码中使用命名函数。)

原文链接:https://www.f2er.com/css/218455.html

猜你在找的CSS相关文章