在jquery中多次調用mouseover和mouseout會發生什麼

我正在創建一個實驗，它使用onclick方法查看大量單元格。我正在測試是否讓他們看起來更像超鏈接，如提高點擊率。在jquery中多次調用mouseover和mouseout會發生什麼

function cursorSelect(element){ 
    element.css("cursor","pointer"); 
} 
function cursorNormal(element){ 
    element.css("cursor","default"); 
} 
function colourSelect(element){ 
    element.css("color","blue"); 
} 
function colourNormal(element){ 
    element.css("color","black"); 
} 

function variation1(){ 
    //variation 1 code 
    $("td").mouseover(cursorSelect($(this))); 
    $("td").mouseout(cursorNormal($(this))); 
} 

function variation2(){ 
    //variation 2 code 
    $("td").mouseover(colourSelect($(this))); 
    $("td").mouseout(colourNormal($(this))); 
} 

var pageVariations = [ 
    function() {}, //Original; Mostlikely this will not need changing 
    function() { //Variation 1 goes in here 
    variation1(); 
    }, 
    function(){ //Variation 2 goes in here 
    variation2(); 
    }, 
    function(){ //Variation 3 goes in here 
    variation1(); 
    variation2(); 
    } 
    ] 
$(document).ready(pageVariations[chosenVariation]);//jQuery launching selected variation

jquery mouseover和mouseout設置的行爲是什麼？多次調用這個方法會覆蓋之前調用的設置，還是追加它們？

來源

2015-04-23 Grimley

會多次調用這個方法覆蓋前面調用的設置，還是追加它們？

所有你正在處理的jQuery代碼是應用CSS，它將在JavaScript中爲element.style對象添加屬性。只要你不應用相同的屬性，它們將被合併而不是被覆蓋。

但是，使用CSS來做這件事會更好。你可以輕鬆地做類似如下：

.variation1 td { 
    color: black 
} 
.variation1 td:hover { 
    color: blue; 
} 

variation2 td { 
    cursor: default; 
} 
.variation2 td:hover { 
    cursor: pointer; 
}

然後，根據你想表現爲準變化，你只是類variation1或variation2添加到頂級元素一樣<body>。

來源

2015-04-23 05:04:56

絕對 - 我打算稍後改變樣式表。這是一個驅動A | B實驗的腳本，用於確定我是否應該進行我正在考慮的更改。 – Grimley

在jquery中多次調用mouseover和mouseout會發生什麼

回答

相關問題