CODEWITHSUNDEEP
htmlcss
user1677409
user1677409

Reputation: 45

Issue with Border Hover on Table <tr>

I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.

For the table, I'm using the following CSS code:

    .sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
    .sch tr{ border: 2px solid #000000; }
    .sch tr:hover{ border-color: red; }
    <table class='sch'>
    <tr><td>Test</td><td>Test</td></tr>
    <tr><td>Test</td><td>Test</td></tr>
    <tr><td>Test</td><td>Test</td></tr>
    </table>

The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.

I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.

Thanks for your help!

Upvotes: 2

Views: 113

Answers (3)

Ivan A
Ivan A

Reputation: 293

If you want to use CSS and HTML only, you can use such not the best but working solution.

CSS-file:

.sch {
    width:97%;
    margin: 0 auto;
    margin-top:30px;
    border-collapse: collapse;
}
tr {
    border: 2px solid #000000;
}
.sch tr:hover {
    border-color: red;
    border-bottom-width: 2px;
}
tr:nth-child(3) {
    border-bottom-width: 0;
}
tr:nth-last-child(1) {
    border-bottom-width: 2px;
}

HTML-file:

<table class='sch'>
    <tr>
        <td>Test</td><td>Test</td>
    </tr>
    <tr>
        <td>Test</td><td>Test</td>
    </tr>
    <tr>
        <td>Test</td><td>Test</td>
    </tr>
</table>

Upvotes: 1

yazanpro
yazanpro

Reputation: 4762

This appears to be tricky to implement without JavaScript. This is a solution using jQuery:

$(".sch tr").hover(function(){
    $(this).css("border-color", "red");
    $(this).prev().css("border-bottom-width", "0");
    }, function(){
    $(this).css("border-color", "#000000");
    $(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

Upvotes: 1

anvk
anvk

Reputation: 1201

border-collapse: collapse; is a culprit here.

It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.

Look at this interactive example in MDN to see exactly what happens https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Upvotes: 1

Related Questions