jquery更改懸停類

我是jQuery的新手，但不知道我做錯了什麼。當我將鼠標懸停在文字「更改」上時，我希望表格行的顏色發生變化。請幫忙！（是的文件指的是保存的jQuery庫）jquery更改懸停類

<html> 
<head> 
    <title>testestsets</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $('#changer').hover(function) { 
      $('#row1').css({ 
       'background-color':'#000', 
       'color':'#FFF' 
      }); 
     }; 
    </script> 
</head> 

<body> 
    <table border="1"> 
     <tr id="row1"> 
      <td>ONE</td><td>TWO</td><td>THREE</td><td>FOUR</td> 
     </tr> 
    </table> 
    <br/><br/> 
    <p id="changer">Change it</p> 
</body> 
</html>

來源

2013-01-15 Simon Carlson

我不喜歡downvote！所以我刪除了我的答案，但認真使用'代碼jQuery（函數（$，undefined）{}）'並使用'代碼$（document.body）.on（{mouseover：function（e）{}，mouseout：function e）{}}，「一些選擇器元素綁定」）'靈活地添加你的元素動態和最重要的方式更快jquery – mikakun

總結jQuery代碼在文檔準備調用是這樣的：

$(document).ready(function() { 
    $('#changer').hover(function() { 
    $('#row1').css({ 
     'background-color': '#000', 
     'color': '#FFF' 
    }); 
    }); 
});

而且，你必須在函數調用中的錯字你插入語。

jsFiddle example

來源

2013-01-15 16:38:49 j08691

.on將解決這個問題;背景顏色不起作用 – mikakun

謝謝！現在，如果我不想在徘徊時將顏色恢復到正常狀態，我該怎麼做？ –

@SimonCarlson - 最簡單的方法是將鼠標懸停（）函數的第二個函數傳遞給鼠標。像這樣[jsFiddle]（http://jsfiddle.net/j08691/bYPks/1/）。 – j08691

要綁定一個.hover回調#changer#changer之前存在於DOM。無論是移動的JavaScript下面<p id="changer">或包裹它$(document).ready(function() {})

您還可以使用CSS僞類:hover做你正在嘗試做的，這也將刪除處理自動懸停添加類。

來源

2013-01-15 16:39:08

$(document).ready(function() {  
    $('#changer').hover(
     function() { 
      $('#row1').css({ 
       'background-color':'#000', 
       'color':'#FFF' 
      }); 
     }, 
     function() { 
      // what that do when they go out 
     } 
    ); 
});

來源

2013-01-15 16:40:08

你非常接近。您缺少一個document.ready和一個括號。

$(document).ready(function(){ 
    $("#changer").hover(function(){ 
     $("tr").css({ 
      'background-color': '#000', 
      'color': '#fff' 
     }); 
    }); 
});

來源

2013-01-15 16:40:09 ram1

你的jQuery有一個bug。你有一個)在錯誤的地方，功能失敗()和)關閉懸停功能。

此外，您還需要將其封裝在$(function(){ });之內，以便在將事件分配給DOM元素之前加載並準備好DOM。

將其更改爲：

$(function(){ 
    $('#changer').hover(function(){ 
     $('#row1').css({ 
      'background-color':'#000', 
      'color':'#FFF' 
     }); 
    }); 
});

來源

2013-01-15 16:40:38

您可以使用一個簡單的CSS做任務

#changer:hover { background-color: #000;color:fff; }

或者，如果你想使用jquery：

$(document).ready(function() {  
    $('#changer').hover(
     function() { 
      $('#row1').css({ 
       'background-color':'#000', 
       'color':'#FFF' 
      }); 
     }, 
     function() { 
      $('#row1').css({ 
       'background-color':'#FFF', 
       'color':'#000' 
      }); 
     } 
    ); 
});

來源

2013-01-15 16:41:28

jquery更改懸停類

回答

相關問題