從CSS調用JavaScript函數

有沒有什麼辦法可以從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; 
}

，我想打電話錨懸停JS功能。

來源

2010-03-15 BreakHead

@Qutbuddin Kamaal：你應該考慮使用像jQuery或Prototype這樣的CSS庫。它們允許您使用CSS選擇器執行查詢，並且您可以立即爲單個事件處理程序設置單個事件處理程序（這看起來像是我想要做的）。 – 2010-03-15 11:21:11

恩，我的意思是JS庫（現在編輯已經太晚了，哈哈） – 2010-03-15 11:54:30

不，您無法直接從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 
$$(".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：在這兩種情況下，我使用匿名內聯函數表達式只是爲了避免給您必須使用命名函數的印象我總是推薦儘管使用生產代碼中的命名函數）。

來源

2010-03-15 11:18:46

我喜歡你的解決方案使用這麼多次這些天.. +1 – ant 2010-03-15 11:28:58

號

（當然，微軟表達式和Mozilla綁定可能允許它，但無論是專有的，應該儘量避免）

從JavaScript將您的事件處理程序。諸如YUI和jQuery之類的庫允許您選擇元素以將其應用於使用CSS選擇器。 Event delegation允許您處理元素上的事件，而不必明確地分配給每個元素（如果在加載後將它們添加到文檔中，這很方便）。

來源

2010-03-15 11:09:50 Quentin

+1。表達式已被棄用，並且在IE8中不起作用，主要是因爲它們對性能造成的絕對殘酷的影響。 DHTML行爲仍然有效，但它們沒有相同的性能問題。 – 2010-03-15 11:18:13

爲什麼你會從你的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>

，或者如果你有特別的錨記只是改變選擇器

來源

2010-03-15 11:14:38 ant

我想你的意思是'.hover（）'而不是'.click（）'。 – 2010-03-15 11:16:13

@Mathias Bynens這確實是我的意圖，我現在會改正它 – ant 2010-03-15 11:28:22

因爲從CSS做起來更合乎邏輯。

如果你想讓鏈接點擊懸停，這是一種審美的質量，應該用CSS來處理。例如：

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

來源

2014-01-05 06:08:10 Cornelius

-1

其實。是的你可以。只是使用javascript：在這樣的背景網址：

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

不完全確定這是否會工作。

乾杯！

來源

2017-03-03 02:10:27 N3Cr0M0rPh

從CSS調用JavaScript函數

回答

相關問題