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

Question

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>

Can you add the CSS relevant to the button display on hover to your question? — webketje, Jan 12 '18 at 23:01
.button { opacity: 0; } .button:hover { display: inline-block; opacity: 1; } — Patrick S, Jan 12 '18 at 23:02

showdev · Accepted Answer · 2023-06-03T05:43:17.647

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:

<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.
I took the liberty of putting the .button images inside their <a> elements, although I'm not sure that's what you intended.
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>

Zerus · Answer 2 · 2018-01-12T23:22:11.820

0

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
});

edited Jan 12 '18 at 23:22

answered Jan 12 '18 at 23:09

Zerus

158
15

Thanks for your response but I can't use JS or jQuery right now. I just joined a company as a co-op and this is my starter project and they told me I only need to use html and css to complete the project. – Patrick S Jan 12 '18 at 23:16

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

2 Answers2