Fatal编程技术网
  • javascript/
  • HTML/CSS/Javascript-将鼠标悬停在不同单元格上时更改一个表单元格值

HTML/CSS/Javascript-将鼠标悬停在不同单元格上时更改一个表单元格值

javascript html css

HTML/CSS/Javascript-将鼠标悬停在不同单元格上时更改一个表单元格值,javascript,html,css,html-table,hover,Javascript,Html,Css,Html Table,Hover,我实际上没有任何与此相关的代码，因为这完全是假设性的，但我只是想知道这样做有多简单 比如说，我有一个有4个单元格的标准表格 <html> <head></head> <body> <table> <tr> <td>Cell 1</td> </tr> <

我实际上没有任何与此相关的代码，因为这完全是假设性的，但我只是想知道这样做有多简单

比如说，我有一个有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>


第1单元
第2单元
第三单元
第4单元
现在我想把鼠标悬停在2号单元格上，在3号单元格中显示图像。。。使用JavaScript可以实现这一点吗？

试试这段代码。请记住，这正是你所要求的，不多也不少。如果您想要一个可维护的解决方案，您将希望使用类（而不是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>


第1单元
第2单元
第三单元
第4单元
var hoverEl=document.getElementById（'hoverover'），
changeEl=document.getElementById（'changeme'）；
hoverEl.addEventListener（'mouseover'，function（）{
changeEl.innerHTML=''；
}，假）；
hoverEl.addEventListener（'mouseout'，function（）{
changeEl.innerHTML='Cell 3'；
}，假）；
下面是一个更通用的纯JavaScript示例。它更改所有
td
的下一个
td
的背景。对于最后一个，它将更改第一个的背景。设置背景图像非常简单，只需将CSS更改为使用
background image
而不是
background color

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来实现这一点。至少有两个Selectro可能会有所帮助

第一个是
+
，第二个是
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>
或者，您可以使用css3选择器创建规则：

img { display: none; }
tr:nth-child(n+1):hover + tr img { display: block; }
我想只有使用css才能实现这一点，但当然，只有在代码中已经有图像的情况下，它才会起作用（如果您只想显示或加载图像，则无法精确）

jQuery是一种替代方案吗？当然在JS中也是可能的。到目前为止，您尝试了什么？您能添加一个@howderek吗？将该表复制到JSFIDLE中非常容易。@Tyriar，是的，但他可能有一些我们不知道的js。它会破坏表结构，innerHTML会删除表单元格。您可以将
id
移动到
td
而不是
tr
。您已经尝试使用了这两种方法，并且两种方法都很有效。这将取决于我需要在什么情况下使用它。是的，它破解了。谢谢你，将来会用到这个。这是我在网站上的第一篇帖子，我非常高兴收到了这么多的支持！嗯，这是一个有趣的功能，我也会尝试使用最合适的倾斜！谢谢你的帮助。 
img { display: none; }
tr:hover + tr img { display: block; }

img { display: none; }
tr:nth-child(n+1):hover + tr img { display: block; }