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 - 當將鼠標懸停在不同的單元格上時，更改一個表格單元值

回答

相關問題