How make HTML table row background change with hover by inline CSS-CodePudding

I have an HTML table with columns of different colours. This is done by assigning to each table cell 'td' element a CSS class defined with the appropriate colour.

Any table row background colour changes when it is subject to a mouse hover. This is done by the following CSS declaration in the style block of my HTML document:

table tr:hover td { background-color: pink; }

That's all very well. But I need to make this work using inline style strings. Such as: <table style="...">.

How can this be done?

I need to drop the table into a content management system that does not accommodate custom CSS style block interventions well.

Workaround suggested here won't work because it defines a before and after highlight colour. This would have to be defined for the whole row, so that the whole row would highlight upon hover. But when the hover is removed, the whole row would then have to return to its prior colours, and those are defined at the level not of row but cell.

CodePudding user response：

First thing, you mustn't use inline css, it's a bad practice and makes the code longer and harder to read. Just make an external file named style.css and link it in the head of your html OR use <style> </style> tags within the head of your html, but the external file one is more recommended because it separates the markup and the styling and you can use the same css file in another project too.

Anyways, here is the answer to your question

There is no solution to your question as inline css cannot use selectors or pseudo classes, for instance..

<div class="div1" style="div2 {background-color: red;}"></div>

<div class="div2" style=""></div>

something like this is not possible , because the style="" attribute only applies to the element that is the holder of the attribute, it cannot make the use of css selectors such as div2{} or pseudo classes such as div1:hover

so the only solution to your problem is that you use <style></style> tags in the header or use an external style sheet.

If you want then you can use inline Javascript that will check for hover to execute a function that will change the background for you.

Also, kindly refer to this answer too. CSS Pseudo-classes with inline styles

CodePudding user response：

You can't.

Use CSS Stylesheet or <style></style>