Tips for modifying the color of an HTML table row when hovering with the mouse

In my solution, I have two distinct MVC projects - one is a Web API project and the other is designed to consume that API. Both projects contain a Content folder with a Site.css file. In the Web API consuming project, I am displaying fetched details in HTML table format resembling a grid. Individual record details are shown on a separate view upon clicking a record row. Prior to clicking on the row, I aim to alter the color or style of the HTML table row (tr) on mouse hover within this consuming project. I have included the following CSS in the Site.css file of the Web consuming project:

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

I have also referenced the same in the head section of the Layout view as shown 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>

Unfortunately, this setup is not currently functioning. Can someone offer assistance?

htmlcsslayoutonmouseoverasp.net-mvc-views

Answer №1

    <!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>Data Table</h2>    
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Brown</td>
    <td>$890</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Johnson</td>
    <td>$780</td>
  </tr>
</table>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML container expands in height with each adjustment of the window size

I am working on a simple three.js scene within a canvas element, and I want it to adjust dynamically upon window resize events. Specifically, I want the width of the canvas to change while keeping the height constant. Usually, I use window.innerWidth and ...

htmlcanvasthree.jselementwindow-resize

Customize the appearance of radio buttons in HTML by removing the bullets

Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...

javascripthtmlcssprogressive-enhancementgraceful-degradation

Since updating my background-image, the header images have mysteriously vanished

Currently, I am in the process of building a webpage and want to create a default navigation bar that will be consistent across all pages. Below is the code snippet from the file where I wish to include my navigation bar: <html> <head> < ...

phpcssnavigationincludedefault

Having trouble with the width of the Material-UI drawer feature

Encountering an issue with the material-ui drawer. I adjusted the width of the drawer container, which led to a problem where the drawer remains slightly inside the page and visible without clicking the button. It seems to be related to the transform attri ...

javascriptcssreactjsmaterial-uireact-component

Scrollspy in Twitter Bootstrap consistently highlights the final element

I'm struggling to understand why only the final section is being highlighted when scrolling. Can you help? <body data-spy="scroll" data-target="#homeToolbar" data-offset="50"> <nav class="navbar navbar-default navbar-fixed-top" id="homeToo ...

jqueryhtmlcsstwitter-bootstrap

Is it possible to display a React Component code within a <code> tag?

I am in the process of creating a tester page that allows users to interact with a library component and document how it is being used. Here is the library component: render = () => { let component = ( <Slider onSlid ...

javascripthtmlcssreactjs

Notification window when the page is being loaded

My goal is to have a module or alert box display when my website is opened, and then disappear after 5 minutes. To see an example of what I'm looking for, take a look at this website: On that website, there is a facebook.com box that automatically d ...

javascriptjqueryhtmlajaxtwitter-bootstrap

IE compatibility with CSS2 selectors

Is there a plugin, preferably jQuery, that can enable the use of CSS2 selectors like 'parent > child' and 'element:first-child' in my stylesheet for IE6, which doesn't seem to support them natively? ...

javascriptjquerycsspluginscss-selectors

Is there a method to trigger click events on overflow content when clicked?

I am currently tackling a significant issue: I need the drop-down options' width to be wider than where the selected value is displayed, especially in IE7. After conducting some research on Google, I decided to take matters into my own hands and write ...

jqueryhtmlcss

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

Trying to establish the selected date range in an ng-model called dateRange in the following HTML. The input text field displays the selected value correctly, but dateRange remains null. What steps can I take to address this issue? <!DOCTYPE html> ...

jqueryhtmlangularjsangularjs-directivedaterangepicker

Manipulating the state of the <audio> HTML5 element with Javascript

Are there any Javascript methods available to retrieve information about the current state of an audio tag? For example: Is the audio playing? Has it stopped? Is it muted? Is it paused? I am aware of using play(), pause(), and others, but I'm unsure ...

javascripthtmlcssdom-eventshtml5-audio

Submitting form based on HTML select input issue

I am facing an issue with a select form where the value resets to "10" every time I send the form. Is there a way to keep the selected option, for example "20", after submitting the form? Below is the code snippet: <form method='get' name=&a ...

javascriptjqueryhtml

Display div content depending on the clicked ID in AngularJS

Unique Header Links HTML <ul ng-controller="pageRouteCtrl"> <li ui-sref-active="active"> <a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a> </li> <li> <a ng-clic ...

javascripthtmlangularjsng-show

Tips on adjusting the default width of the React player interface

I'm currently utilizing react-player to display a video in my app. The default width it comes with is not responsive, and applying CSS didn't prove to be effective. import ReactPlayer from 'react-player'; <ReactPlayer url="https:// ...

cssreactjsresponsivereact-player

The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line. http://jsfiddle.net/A5Jc7/60/ The HTML structure is as follows: <div> <div class="box1"></div> <div class="box2"></div> ...

htmlcss

Utilizing em units within CSS media queries is producing erratic outcomes on various browsers

My CSS media queries are set up in a progressive manner like the following: * { font-size: 14pt; } @media screen and (min-width:85em) { : : } @media screen and (min-width:110em) { : : } When I have two browsers open on the same screen, with identical siz ...

cssmedia-queriesfont-size

Mastering the Art of Utilizing Box Component Spacing Props

Easy margin and spacing adjustments are possible with the help of Material-UI. They provide shortcuts that eliminate the need to individually style components with CSS. In the code snippet below, it's important to note that specifying the measuremen ...

cssreactjsmaterial-ui

Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

Currently, I am in the process of revamping our company's WordPress website using the Divi Builder. For the past couple of days, I have been scouring the internet trying to find a solution that would allow the navigation bar to change CSS classes as t ...

javascriptjqueryhtmlcsswordpress

Fashion for the repetitive elements, activated by events

Looking for ways to style a specific table element that is generated from a repeat.for loop on a <td> tag. <td repeat.for="field of fields" class="${field.fieldKey == 'validTo' ? 'fontweigth: bold;': ''}"> b ...

csstypescriptaurelia

How can I ensure my game or website fits perfectly on the screen without any need

I have recently developed a fun Erase-A-Man game that is optimized for mobile devices. However, I am facing an issue where users need to scroll to view all the letters on their screens. My goal is to make the game fit perfectly on all phone screen sizes so ...

javascriptjqueryhtmljquery-mobile