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实现吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-03-18 22:01:39
您可以尝试仅使用css来实现此目的。至少有两个选择器可能会有所帮助。
第一个是+，第二个是nth-child()。因此，假设您总是希望在表单元格n+1中显示图像，其中n是您悬停的单元格：
<table>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td><img src="yoursource.jpg"></td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td><img src="yoursource2.jpg"></td>
</tr>
</table>你可以这样尝试：
img { display: none; }
tr:hover + tr img { display: block; }或者，您可以使用css3选择器创建规则：
img { display: none; }
tr:nth-child(n+1):hover + tr img { display: block; }我猜只有通过使用css才能做到这一点，但当然只有当你的代码中已经有图像时才能起作用(你不确定是只想显示它们还是加载它们)。
working example
Stack Overflow用户
发布于 2013-03-18 21:19:25
试一下这段代码。请记住，这完全您所要求的，不多，也不少。如果您想要一个可维护的解决方案，您会希望使用类(而不是ID)正确地扩展此代码，但这超出了本问题的范围。
<html>
<head></head>
<body>
<table>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td id="hoverover">Cell 2</td>
</tr>
<tr>
<td id="changeme">Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
<script>
var hoverEl = document.getElementById('hoverover'),
changeEl = document.getElementById('changeme');
hoverEl.addEventListener('mouseover', function() {
changeEl.innerHTML = '<img src="/path/to/image" />';
}, false);
hoverEl.addEventListener('mouseout', function() {
changeEl.innerHTML = 'Cell 3';
}, false);
</script>
</body>
</html>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
复制相关文章
相似问题
腾讯云开发者
