CODEWITHSUNDEEP
htmlcsshover
Patrick S
Patrick S

Reputation: 85

How to make button appear on hover when you hover over a whole table row?

I'm running into a problem in my HTML code. I am trying to display a button when you hover over a row in a table. Right now the button only displays when you hover near it but I need it to show when you hover over anywhere on that row. Can anyone help explain how to do this?

.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>

Upvotes: 4

Views: 15574

Answers (2)

showdev
showdev

Reputation: 29168

Right now, a button will only show when you hover over it directly. In order to show a button when its table row is hovered, set your CSS definition to target buttons that are inside of hovered rows:

tr:hover .button { ... }

Also:

  1. <div> elements that are inside <tr> but not <td> are invalid, per the permitted content of <tr> elements. I have removed them, but you could wrap them in <td> elements if you need them.

  2. I took the liberty of putting the .button images inside their <a> elements, although I'm not sure that's what you intended.

  3. I noticed that the hover effect doesn't work over spaces between cells, which causes gaps in the hover area. So I set border-collapse:collapse; and padding the cells individually.

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>

Upvotes: 6

Zerus
Zerus

Reputation: 158

It's my understanding that from explanation

I am trying to display a button

that initially it is hidden? If so, just trigger hover over a button with jQuery.

So, lets say wee add ID to : <tr id="myrow"> and in <div class="button"> we also add ID: <div class="button" id="mybtn">

Then in jQuery we have:

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

Upvotes: 0

Related Questions