我的HTML代碼遇到了問題。當(dāng)鼠標(biāo)懸停在表格中的某一行上時，我試圖顯示一個按鈕。現(xiàn)在該按鈕只顯示當(dāng)你懸停在它附近，但我需要它顯示當(dāng)你懸停在該行的任何地方。有人能幫忙解釋一下怎么做嗎？

.button {
  opacity: 0;
}

.button:hover {
  display: inline-block;
  opacity: 1;
}

<table>
  <tr>
    <div class="button">
      <a href="#"></a>
    </div>
    <td><img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
    <td>Make a To Do List</td>
    <td>Me Myself and I</td>
    <td>Whenever I want</td>
    <td>69%</td>
    <td>
      <div class="button">
        <img src="/app/images/master/actions_btn.svg" />
        <a href="#"></a>
      </div>
    </td>
  </tr>
</table>

現(xiàn)在，一個按鈕只有當(dāng)你直接懸停在它上面時才會顯示。為了在其表格行懸停時顯示按鈕，請將您的CSS定義設(shè)置為指向懸停行內(nèi)部的按鈕:

tr:hover .button { ... }

另外:

& ltdiv & gt內(nèi)部的元素& lttr & gt但不是& lttd & gt是無效的，根據(jù)& lttr & gt元素。我已經(jīng)把它們拿走了，但是你可以把它們包起來。td & gt元素，如果你需要的話。

我冒昧地把。按鈕圖像在它們的& lta & gt元素，雖然我不確定這是你的本意。

我注意到懸停效果對單元格之間的空間不起作用，這會導(dǎo)致懸停區(qū)域出現(xiàn)間隙。所以我設(shè)置了border-collapse:collapse；并單獨填充單元格。

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
}

.button {
  opacity: 0;
}

tr:hover .button {
  opacity: 1;
}

<table>
  <tr>
    <td><img src="https://via.placeholder.com/30x20/" width="30" height="20" /></td>
    <td>Make a To Do List</td>
    <td>Me Myself and I</td>
    <td>Whenever I want</td>
    <td>69%</td>
    <td>
      <div class="button">
        <a href="#">
          <img src="https://via.placeholder.com/30x20/" width="30" height="20" />
        </a>
      </div>
    </td>
  </tr>
  <tr>
    <td><img src="https://via.placeholder.com/30x20/" width="30" height="20" /></td>
    <td>Make a To Do List</td>
    <td>Me Myself and I</td>
    <td>Whenever I want</td>
    <td>69%</td>
    <td>
      <div class="button">
        <a href="#">
          <img src="https://via.placeholder.com/30x20/" width="30" height="20" />
        </a>
      </div>
    </td>
  </tr>
</table>

我的理解是，根據(jù)解釋

我正在嘗試顯示一個按鈕

最初它是隱藏的？如果是這樣，只需用jQuery觸發(fā)懸停在按鈕上。

所以，讓我們把ID添加到:& lttr id = " myrow " & gt而在& ltdiv class="button " >我們也加ID:& lt；div class = " button " id = " mybtn " & gt；

那么在jQuery中我們有:

$("#myrow").mouseover(function() {
   $("#mybtn").show() // if it was hidden show it
   $("#mybtn").trigger("mouseover"); // trigger as if mybtn was mouseovered
});