Question

所以我试图制作一个带有DIV的盒子，里面有一个看不见的TD，这样我就可以画出＆＃34;＆＃34;在它的内部，但是当你将鼠标移到我希望它留下一条变色的痕迹时。我真的很难过。

我不是在寻找一个直接的答案，但是我想知道我做错了什么以及我可以调查并拼凑起来解决它。

谢谢！我的代码如下。

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

Answer 1

你的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()。

Answer 2

我立即看到了一些问题。

对于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/）。

将鼠标悬停在jquery上以便TD更改背景颜色

2 个答案: