从CSS调用函数中的JavaScript

有什么方法可以从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;
}

我想在anchor hover上调用JS函数。

否

（微软表达式和Mozilla绑定可能允许这样做，但两者都是专有的，应该避免）

---

从JavaScript分配事件处理程序。像YUI和jQuery这样的库允许您使用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>

$（文档）.ready（函数（）{
$（“a”）.hover（函数（）{
myFunctionInvoke（）；
});
});

---

或者，如果您考虑了特定的锚定，只需更改选择器即可

否，您无法直接从CSS触发JavaScript

您可以使用CSS选择器找到您希望以这种方式查看的元素，然后查看鼠标事件。标准事件是

mouseover

和

mouseout

，但它们可能有点棘手，因为它们会冒泡（例如，当鼠标离开任何子元素时，您会得到

mouseout

）。但是，如果使用适当的逻辑，它们并不坏。事实上，如果您有很多这样的逻辑，您可能希望使用

mouseover

和

mouseout

而不是下面的替代方法，因为您可以仅在父容器上设置它们，然后确定涉及哪个子元素，在某些情况下更简单（而在其他情况下更复杂）

IE提供了

mouseenter

和

mouseleave

，它们更容易使用，因为它们不冒泡，但（当然）是IE特有的。这些工具非常方便，以至于框架开始支持它们，即使在不支持它们的浏览器中也是如此；例如，提供它们，如果其他一些框架也这样做，我也不会太惊讶。jQuery还提供了方便的功能，非常接近您的需求：

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

因为从CSS进行命名更合逻辑

如果你想让链接点击鼠标悬停，这是一种审美品质，应该用CSS来处理。例如：

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

---

事实上。是的，你可以。只需在后台url中使用javascript:如下所示：

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

BODY{background:url（“javascript:yourFunction（）；”）}

但不完全确定这是否有效

---

干杯

我想你的意思是

.hover（）

而不是

。click（）

@Mathias Bynens这确实是我的意图，我现在就纠正它+1。表达式已被弃用，在IE8中无法工作，主要原因是它们对性能的影响非常大。DHTML行为仍然有效，但它们没有相同的性能问题。@Qutbuddin-Kamaal:您应该研究使用诸如jQuery或Prototype之类的CSS库。它们允许您使用CSS选择器执行查询，并且您可以立即将单个事件处理程序设置为多个元素（在我看来，这就像您正在尝试做的）。嗯，我的意思是JS库（现在编辑已经太晚了lol）。是的，您可以不等同于不完全确定这是否可行。