How to change html table row color on mouse hover

Question

How to change html table row color on mouse hover

133 views Asked by Sam At 19 May 2023 at 06:43

I have two different mvc projects in one solution. One is web api project and other is to consume that api. Both have Content folder and Site.css in them. Now in web api consuming project I am showing fetched details in HTML table format like grid. I'm showing individual record details on different view by onclick of record row. Now, before I click the row, I need to change HTML table row (tr) color or style on mouse hover in this consuming project. I have written below css in Site.css in web consuming project Site.css file.

tbody tr:hover {
    cursor:pointer;
    background-color:grey;
    color:blue;
}

And have referenced the same on Layout view in head section as below

<head>
          @System.Web.Optimization.Styles.Render("~/Content/css")
          <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
          @System.Web.Optimization.Scripts.Render("~/bundles/modernizr")
</head>

But its not working. Any help please.

Original Q&A

There are 1 answers

**Aryan** · Answer 1 · 2023-05-19T13:30:26+00:00

    <!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color: coral;}
</style>
</head>
<body>

<h2>Table</h2>    
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>User</td>
    <td>Name</td>
    <td>Rs.100</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>User</td>
    <td>Rs.50</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>User</td>
    <td>Rs.890</td>
  </tr>
  <tr>
    <td>Last</td>
    <td>User</td>
    <td>Rs.780</td>
  </tr>
</table>

</body>
</html>

TechQA.

How to change html table row color on mouse hover

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in LAYOUT

Related Questions in ONMOUSEOVER

Related Questions in ASP.NET-MVC-VIEWS

Popular Questions

Popular Tags

Trending Questions