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

实际上我没有任何与此相关的代码，因为它完全是假想的，但我只是想知道它会是多么简单做。例如，我有一个4格的标准表格。HTML/CSS/Javascript - 当将鼠标悬停在不同的单元格上时，更改一个表格单元值

<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吗？

来源

2013-03-18 Ryan Bowers

是jQuery的替代？ – mattytommo 2013-03-18 13:12:39

当然，它可能在JS中。你试过什么了？ – techfoobar 2013-03-18 13:12:44

你可以添加一个http://jsfiddle.net/ – howderek 2013-03-18 13:14:26

您可以尝试才达到仅使用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，当然，如果你在你的代码已经图象它只会工作（你没如果你只想显示t，则是精确的下摆或加载它们）。

working example

来源

2013-03-18 14:01:39

嗯，这是一个有趣的功能倾斜，我也会尝试和使用最合适的！感谢你的协助。 – 2013-03-18 16:38:05

试试这段代码。请记住，这是正好你问，没有更多，不能少。如果你想要一个可维护的解决方案，你需要使用类（而不是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-18 13:19:25

它会破坏表格结构，innerHTML会删除表格单元格。你可以将'id'移动到'td'而不是'tr'。 – dfsq 2013-03-18 13:25:29

已经尝试使用两者，并且它们都能够充分发挥作用。这将取决于我需要使用它的情况。 – 2013-03-18 13:52:30

@dfsq - 良好的捕获，忘记了''，将编辑。 – 2013-03-18 14:23:46

这是一个更纯粹的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-18 13:26:33

是的，破解它。谢谢，将来会用到这个。我非常满意这是我在网站上发布的第一篇文章后收到的支持数量！ – 2013-03-18 13:46:15

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

回答

相关问题