How to override CSS style during hover in a table row?


Tags: css,table,hover,override

Problem :

I saw several questions on this forum related to my problem but neither of them were helpful, so am posting here.

I have a table where a style is applied at table level(.tblSignal) and td level (.tdSignalName). Here is jsfiddler link

My problem is, when I hover on the table, all the text should turn to white color. But since there is a style applied on .tdSignalName as "#0072c6", it does not override the color to white. I tried "!important" but it did not work. Please advise !

.tblSignal{
/* border-width:1px; */
border-style:solid;
}
.tblSignal:hover{
background-color:#0072c6;
color:#FFFFFF !important;
font-size:initial;
}
.tdSignalName{
font-weight:bold;
height:30px;
font-size:16px;
color:#0072c6;
}
/* .tdSignalName:hover{
color:#FFFFFF !important;
} */

.tdSignalDescription{

}
.tdSigButton{
text-align:center;
vertical-align:middle;
}
<table class="tblSignal" width="500px">
				<tr >
					<td class="tdSignalName" width="400px">						
						<div>Title</div>
					</td>
					
					<td rowspan="2" class="tdSigButton" width="100px">
						<div id="divButton">						 						 
						 <button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
						</div>
					</td>
				</tr>	
				<tr>
					<td class="tdSignalDescription" width="400px">
						<!-- _#=ctx.RenderBody(ctx)=#_                 -->
						<div><i>SignalDescription </i></div>
					</td>					
					
				</tr>								
			</table>



Solution :

You need to also override the .tdSignalName colour declaration when the parent is hovered...

.tblSignal:hover .tdSignalName {
    color:#FFFFFF;
}

Example...

.tblSignal {
    border-style: solid;
}
.tblSignal:hover {
    background-color: #0072c6;
    color: #FFFFFF !important;
    font-size: initial;
}
.tdSignalName {
    font-weight: bold;
    height: 30px;
    font-size: 16px;
    color: #0072c6;
}
.tblSignal:hover .tdSignalName {
    color: #FFFFFF;
}

.tdSigButton {
    text-align: center;
    vertical-align: middle;
}
<table class="tblSignal" width="500px">
<tr>
    <td class="tdSignalName" width="400px">
        <div>Title</div>
    </td>
    <td rowspan="2" class="tdSigButton" width="100px">
        <div id="divButton">						 						 
            <button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
        </div>
    </td>
</tr>
<tr>
    <td class="tdSignalDescription" width="400px">
        <!-- _#=ctx.RenderBody(ctx)=#_                 -->
        <div><i>SignalDescription </i></div>
    </td>
</tr>
</table>


    CSS Howto..

    how to apply css to web app?

    How to replace only the text of this element with jQuery?

    How to make a CSS composite scalable

    How to create a border that fully covers the adjacent corners in CSS?

    How to DRY up on SASS transitions with multiple elements?

    How to detect single letters and modify their look/css

    How to replicate PS multiply layer mode

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    simple text input box “autosuggest” script - how to overlap with css

    How to create a dropdown menu like google's 'More' button?

    css: how to vertically align table within div

    How to use media queries for mobile devices and desktop?

    CSS - How to upscale Unicode arrows?

    How to centre a javascript element using inline css? [closed]

    How to identify is a blog post has been selected or not?

    How can i make a fixed box inside a div with scroll?

    How to display a button over a picture only when hovering it?

    Reposition and show live results upwards

    How to: Reduce font-size if a line breaks

    How to add background video stop button

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    how is Zurb's Foundation Menu button coded?

    How do I stop animation in HTML and CSS

    how to set css property of one class from another class

    how to load a css for Safari only?

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    css image not showing up

    How to use the compass transition mixins with a translateX property and autoprefixer?

    How to prevent mouseenter event action with jQuery

    How to apply css rules to html element using ExtJS?