All geek questions in one place

How to create hover effect in html table using css?

I tried to create a hover effect using css, where if the user is hovering over the rows of the table, he will change the background color to red. But I notice when I was hovering over the lines, instead of filling the entire line with red, it fills only individual cells.

Here is my code:

.GridviewScrollHeader TH,
.GridviewScrollHeader TD {
  padding: 5px;
  font-weight: bold;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #EFEFEF;
  vertical-align: bottom;
  text-align: left;
}

.GridviewScrollItem TD {
  padding: 5px;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #FFFFFF;
}

.GridviewScrollItem TD:hover {
  background-color: red;
}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>
    Test
  </title>

  <link href="GridviewScroll.css" rel="stylesheet" />
  <style type="text/css">
    BODY,
    TD {
      font-family: Tahoma, Arial, Verdana;
      font-weight: normal;
      font-size: 12px;
      color: #333333;
    }
  </style>
</head>

<body>
  <table cellspacing="0" id="GridView1" style="width:100%;border-
    collapse:collapse;">
    <tr class="GridviewScrollHeader">
      <td colspan="2">Product</td>
      <td rowspan="2">ListPrice</td>
      <td rowspan="2">StandardCost</td>
      <td colspan="2">Package</td>
      <td rowspan="2">SafetyStockLevel</td>
      <td rowspan="2">ReorderPoint</td>
      <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
      <td>Name</td>
      <td>Number</td>
      <td>Weight</td>
      <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>HL Mountain Frame - Black, 38</td>
      <td>FR-M94B-38</td>
      <td>1349.6000</td>
      <td>739.0410</td>
      <td>2.68</td>
      <td>38</td>
      <td>500</td>
      <td>375</td>
      <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>HL Mountain Frame - Silver, 38</td>
      <td>FR-M94S-38</td>
      <td>1364.5000</td>
      <td>747.2002</td>
      <td>2.68</td>
      <td>38</td>
      <td>500</td>
      <td>375</td>
      <td>7/1/2005 12:00:00 AM</td>
    </tr>
  </table>

</body>

</html>
Run codeHide result
+4
source share
4 answers

This is because you set the hover effect only on td elements, not the entire line. If you remove tdfrom your css and apply only hover on trElements, this will work.

. td, tr:hover. , .

.GridviewScrollHeader th, .GridviewScrollHeader td {
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD {
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td>
        <td rowspan="2">ListPrice</td>
        <td rowspan="2">StandardCost</td>
        <td colspan="2">Package</td>
        <td rowspan="2">SafetyStockLevel</td>
        <td rowspan="2">ReorderPoint</td>
        <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
        <td>Name</td>
        <td>Number</td>
        <td>Weight</td>
        <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>1349.6000</td>
        <td>739.0410</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td>
        <td>FR-M94S-38</td>
        <td>1364.5000</td>
        <td>747.2002</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>
Hide result
+1

css .

.GridviewScrollItem:hover TD
{
    background-color: red;
}

,

+1

You just need to place the cursor in the whole row of the table , this is yours tr, now you only have yourstd

Just add hover to the line:

.GridviewScrollItem:hover {
    background-color: red;
}


.GridviewScrollHeader th, .GridviewScrollHeader td {
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD {
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td>
        <td rowspan="2">ListPrice</td>
        <td rowspan="2">StandardCost</td>
        <td colspan="2">Package</td>
        <td rowspan="2">SafetyStockLevel</td>
        <td rowspan="2">ReorderPoint</td>
        <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
        <td>Name</td>
        <td>Number</td>
        <td>Weight</td>
        <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>1349.6000</td>
        <td>739.0410</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td>
        <td>FR-M94S-38</td>
        <td>1364.5000</td>
        <td>747.2002</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>
Run codeHide result
0
source

What I tried is different and may have some problems, but I can’t say that I didn’t try, I see better results from others :)

CSS

.GridviewScrollHeader TH, .GridviewScrollHeader TD{
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD{
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #FFFFFF;
}

/* The :nth-child() Does not work on some versions of IE 
removing it will only let you highlight other fields there on until the end of the "td" 
just add overflow-x:hidden if you remove the nth child and make the table full screen width by setting body margin to 0*/

.GridviewScrollItem TD:nth-child(1):hover{
    background-color: red;
    width:98.4%; /* If you ever Change the margins make sure to change this accordingly */ /* full screen is 100% but take note of margins */
    position:absolute;
    opacity:0.5; /* Does not work in IE9 or less */ /* Check for other opacity attributes for older IE Browsers */
    font-weight:bold; /* To Darken text to still be visable */
}

HTML hasn't changed and seems to rely on opacity, but these are my results, some of you may disagree.

0
source

Source: https://habr.com/ru/post/1686126/

More articles:


All Articles