jquery鼠標移動到一個TD改變背景顏色

-1

所以我試圖做一個DIV的盒子裏面有一個不可見的TD，它可以讓我在裏面「畫」，但是當你把鼠標放在我的上面時希望它留下變色的痕跡。我真的很難過。jquery鼠標移動到一個TD改變背景顏色

我不是在尋找一個直接的答案，但我想知道我在做什麼錯，我可以看看並拼湊起來解決它。

謝謝！我的代碼如下。

<head> 
    <title>Clicker</title> 
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/> 
    <script type='text/javascript' src='script.js'></script> 
</head> 
<body> 
<div id='outter'> 
<table> 
    <tr> 
     <td id="test"> 
     </td> 
    </tr> 
</table> 
</div>

的Jquery：

$(document).ready(function() 
{ 
    $('td').mouseover=function() 
    { 
     var td = $('#test'); 
     td.stop() 
     .css("background-color","yellow"); 
    } 
});

CSS：

#outter 
{ 
    height: 260px; 
    width: 450px; 
    border: 1px black solid; 
} 

td 
{ 
    height: 260px; 
    width: 450px; 
}

來源

2014-09-27 Joseph Woods

我想我需要以某種方式讓我的TD更大，或者將它變成網格？我希望它很好，但有點像刻蝕草圖。 – 2014-09-27 02:15:13

'所以我正在寫一個盒子，上面有一個盒子，上面有一個寄宿者'ooooook爲什麼不只用CSS？沒有JS是需要一個簡單的'：懸停' – 2014-09-27 02:17:05

@ RokoC.Buljan固定。我正在嘗試使用JQ在鼠標懸停（鼠標懸停）上進行背景更改。後來我會添加一些按鈕和其他一些東西。 – 2014-09-27 02:18:31

你jQuery是錯誤的。

$('td').mouseover=function() { 
    var td = $('#test'); 
    td.stop() 
    .css("background-color","yellow"); 
}

應該是：

$('td').mouseover(function() { 
    var td = $('#test'); 
    td.css("background-color","yellow"); 
})

http://api.jquery.com/mouseover/

我也不知道爲什麼你在那裏stop()。

來源

2014-09-27 02:29:24

仍然沒有從框中獲得任何顏色。 – 2014-09-27 02:44:50

下面是一個工作示例：http://jsfiddle.net/tuqwebym/ – 2014-09-27 02:48:43

Woops，我可能沒有說清楚，我希望它只做一條線，而不是改變整個背景。就像是鼠標後面的一條線。 – 2014-09-27 02:51:27

我發現了一些問題。

對於你的HTML，你正在尋找一個網格來繪製，但你只有一個單元格。你想要類似的東西。
<table><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></table>，這是一個5x5。它至少應該用於測試。

然後您的鼠標懸停將需要更改。您想要捕獲this對象，因爲這是您要狩獵的td，我不確定您爲什麼使用stop。
$('td').bind('mouseover', function(){$(this).css("background-color","yellow");})

下面是這些變化的小提琴，和一些更多的調整（http://jsfiddle.net/66g7edyz/）。

來源

2014-09-27 02:29:32 Jonathon

仍然沒有得到這種顏色。 – 2014-09-27 02:46:39

查看小提琴http://jsfiddle.net/66g7edyz/。這個對我有用。 – Jonathon 2014-09-27 02:51:53

這有助於很多。謝謝。 – 2014-09-27 02:57:13

jquery鼠標移動到一個TD改變背景顏色

回答

相關問題