1

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

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

4

3 回答 3

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>
于 2013-03-18T13:19:25.270 回答
1

这是一个更通用的纯 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;
}
于 2013-03-18T13:26:33.513 回答
0

您可以尝试仅使用 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 才能做到这一点，但当然，只有在代码中已经有图像时它才会起作用（如果你只想显示或加载它们，你并不精确）。

工作示例

于 2013-03-18T14:01:39.177 回答