CODEWITHSUNDEEP
htmlcss
user3733831
user3733831

Reputation: 2926

Display some HTML when mouse over in a table row using CSS

I have a HTML table tr and it looks like this:

<tbody>                             
    <tr>
        <td><input type="checkbox" /></td>
        <td>
            <a href="" class="name">This is Pet Name</a>
            <div class="manage-link">
                <a href="">Edit</a> | <a href="">Delete</a> | <a href="">View</a>
            </div>

        </td>
        <td>Administrator</td>
        <td><a href="">German Shepherd</a>, <a href="">Dogs</a></td>
        <td class="center">View</td>
        <td><span>2015/06/16</span>Added</td>
    </tr>   

    ....

    ....

</tbody>

Using this code what I need is, manage-link DIV should be only display when I mouse over on this tr.

This is how I tried it. But I couldn't get it to work. 

td div.manage-link {
    display: none;
}

tbody tr:hover + td div.manage-link {
    display: block;
}

Can anybody tell me what is the wrong with this?

Thank you.

Upvotes: 1

Views: 3078

Answers (2)

pablito.aven
pablito.aven

Reputation: 1165

What I can think of is using JQuery with mouseenter and mouseleave events, so that you are not forced to change tr display attribute.

window.onload = function(){
  $('tr').mouseenter(function(){
    $('div.manage-link').css('display','block');
  });
  $('tr').mouseleave(function(){
    $('div.manage-link').css('display','none');
  });
}

Upvotes: 0

taxicala
taxicala

Reputation: 21759

Change:

tbody tr:hover + td div.manage-link {
    display: block;
}

To:

tbody tr:hover td div.manage-link {
    display: block;
}

Upvotes: 3

Related Questions