从CSS中调用JavaScript：hover

holgip5t 于 2023-02-02 发布在 Java

关注(0)|答案(6)|浏览(190)

有没有办法通过css调用JavaScript函数？
例如，在:hover样式中：

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

我要调用的JavaScript函数位于锚:hover上。

JavaScript

来源：https://stackoverflow.com/questions/2446598/calling-javascript-from-within-css-hover

6条答案

按热度按时间

fivyi3re1#

不可以，您不能直接从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：在这两种情况下，我都使用了匿名内联函数表达式，只是为了避免给人一种必须使用命名函数的印象。不过，我 * 总是 * 建议在生产代码中使用命名函数。）

赞(0）回复(0）举报 2023-02-02

kmynzznz2#

没有。
(Well，Microsoft表达式和Mozilla绑定可能允许此操作，但这两种操作都是专有的，应避免使用）
从JavaScript分配事件处理程序。YUI和jQuery等库允许您使用CSS选择器选择要应用的元素。Event delegation允许您处理元素上的事件，而不必显式地分配给每个元素（如果您在加载文档后将它们添加到文档中，这很方便）。

赞(0）回复(0）举报 2023-02-02

u5rb5r593#

你可以从javascript调用它（它做同样的事情）。下面是如何在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>

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

赞(0）回复(0）举报 2023-02-02

2mbi3lxu4#

因为从CSS中做更符合逻辑。
如果你想让链接点击悬停，这是一个美学质量，应该用CSS处理。例如：

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

赞(0）回复(0）举报 2023-02-02

bsxbgnwa5#

这既是一种美学品质，因此，它应该用CSS来处理，也是一种功能品质，因此，应该用html和javascript来处理。
还有一种非常简单的方法可以在html中调用页面加载函数：

<body onload="myFunction()">

赞(0）回复(0）举报 2023-02-02

zengzsys6#

事实上，你可以的，只要使用javascript：在background-url中，如下所示：

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

虽然不完全确定这是否有效。
干杯!

赞(0）回复(0）举报 2023-02-02

我来回答

从CSS中调用JavaScript：hover

6条答案

相关问题

热门标签

最新问答