Question

我实际上并没有任何与此相关的代码，因为它完全是假设的，但我只是想知道它有多么简单。

让我们说，例如，我有一个包含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？

Answer 1

尝试使用此代码。请记住，这确实完全你提出的问题，不多也不少。如果您需要可维护的解决方案，则需要使用类（而不是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>

Answer 2

这是一个使用纯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;
}

Answer 3

您可以尝试仅使用css来实现这一目标。至少有两个可能有用的selectros。

第一个是+，第二个是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

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

3 个答案: