Question

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

前者是风格：

.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函数。

Answer 1

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

可以做的是使用CSS选择器以这种方式查找要观看的元素，然后观察鼠标事件。标准事件是mouseover和mouseout，但它们可能有点棘手，因为它们会冒泡（例如，只要鼠标离开任何后代元素，就会获得mouseout）。但是，如果使用适当的逻辑，它们并没有坏用，事实上如果你有很多这些，你可能想要使用mouseover和mouseout而不是下面的替代，因为你可以将它们设置在父容器上，然后确定涉及哪个后代元素，这在某些情况下可能更简单（在其他情况下更复杂）。

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

...这实际上只是设置mouseenter和mouseleave处理程序的快捷方式，但仍然非常简洁。

在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：在这两种情况下，我都使用了匿名内联函数表达式，以避免给人留下必须使用命名函数的印象。但是总是建议在生产代码中使用命名函数。）

Answer 2

没有。

（好吧，Microsoft Expressions和Mozilla Bindings可能会允许它，但两者都是专有的，应该避免使用）

从JavaScript分配您的事件处理程序。诸如YUI和jQuery之类的库允许您选择元素以将它们应用于使用CSS选择器。 Event delegation允许您处理元素上的事件，而无需明确地分配给每个元素（如果您在加载后将它们添加到文档中，这很方便）。

Answer 3

如果你想“在锚点悬停时调用JS函数”，为什么要从你的css中调用它，把它放在你的标记中：

<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>

或者如果您有特定的锚点，只需更改选择器

即可

Answer 4

因为从CSS中做这件事更合乎逻辑。

如果想要制作链接，请点击悬停，这是一种美学品质，应该用CSS处理。例如：

#header_menu li a:hover{
    color:white;
    js:click();
}

Answer 5

实际上。是的你可以。只需使用javascript：在background-url中就像这样：

<STYLE type="text/css">BODY{background:url("javascript:yourFunction();")}</STYLE>

不完全确定这是否有用。

干杯！

从CSS函数调用JavaScript

5 个答案: