HTML / CSS / Javascript -当鼠标悬停在不同的单元格上时，更改一个表格单元格值
HTML / CSS / Javascript -当鼠标悬停在不同的单元格上时，更改一个表格单元格值
提问于 2013-03-18 21:12:14
我实际上没有任何与此相关的代码，因为它完全是假设的，但我只是想知道这样做会有多简单。
比方说，我有一个包含4个单元格的标准表。
<html>
<head></head>
<body>
<table>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>现在我想将鼠标悬停在单元格2上，并在单元格3中显示图像...这可以使用JavaScript实现吗？
Stack Overflow用户
发布于 2013-03-18 21:26:34
下面是一个使用纯JavaScript的更通用的示例。它会更改所有td的下一个td的背景。对于最后一个，它将改变第一个的背景。设置背景图像就像将CSS更改为使用background-image而不是background-color一样简单。
jsFiddle
JavaScript
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
tds[i].onmouseover = (function (i) {
return function () {
tds[(i + 1) % tds.length].className = 'hovered';
}
})(i);
tds[i].onmouseout = (function (i) {
return function () {
tds[(i + 1) % tds.length].className = '';
}
})(i);
}CSS
.hovered {
background-color:#F00;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15477705
复制相关文章
相似问题
腾讯云开发者
