当鼠标移动到子元素时，如何保持CSS悬停规则适用？

Question

I have a table that when you hover each row a delete button slides out from under the last cell in the row. The problem is when I move off of the row to click on the delete button the delete button slides back under the cell because the :hover rule is no longer being applied.

Here is my code:

 table { margin: 10px auto; background-color: white; border-collapse: collapse; } body { font-family: helvetica; } p { margin: 10px auto; width: 200px; } td { padding: 10px; border: 1px solid #333; position: relative; } .delete { position: absolute; width: 20px; height: 20px; top: 50%; left: 100%; margin-top: -10px; margin-left: -20px; background-color: hsl(0,70%,50%); border-radius: 20px; z-index: -1; transition: 0.3s; } tr:hover .delete { margin-left: 2px; } 

 <p>hover the rows</p> <table> <tr> <td>Test Data</td> <td>More Data<div class="delete"></div></td> </tr> <tr> <td>More Data</td> <td>Test Data<div class="delete"></div></td> </tr> </table> 

Answer 1

Use a dummy-cell for the delete-button and hide with left: 0% , margin-left:-20px; and overflow: hidden on the dummy-cell:

JSFiddle

<tr>
    <td>Test Data</td>
    <td>More Data</td>
      <td class="dummy"><div class="delete"></div></td>
  </tr>

.dummy {
    width: 20px;
    overflow:hidden;
    border: none;
}

.delete {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0%;
  margin-top: -10px;
  margin-left: -20px;
  background-color: hsl(0,70%,50%);
  border-radius: 20px;
  transition: 0.3s;
}

Answer 2

The reason why you are losing your hover on the div is because of the negative z-index .

All you have to do, is to also change the z-index along with the margin on :hover . That's it. no other changes required. Although, you might want to increase the size of the .delete a little to be able to capture it within the height of the tr .

Snippet:

 table { margin: 10px auto; background-color: white; border-collapse: collapse; } body { font-family: helvetica; } p { margin: 10px auto; width: 200px; } td { padding: 10px; border: 1px solid #333; position: relative; } .delete { position: absolute; top: 50%; left: 100%; width: 20px; height: 20px; margin-top: -10px; margin-left: -20px; background-color: hsl(0,70%,50%); border-radius: 20px; z-index: -1; transition: 0.3s; } tr:hover .delete { margin-left: 2px; z-index: auto; } 

 <p>hover the rows</p> <table> <tr><td>Test Data</td><td>More Data<div class="delete"></div></td></tr> <tr><td>More Data</td><td>Test Data<div class="delete"></div></td></tr> </table>