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..
Browsers tend to cache css and script resources for a period of time. Try clearing out the cache on the device or even manually force it to load a new...
I assume that you want to only highlight the last search and not store the ones from before. With this assumption, you can store the old value if it is...
No, never create an specific CSS styles set for an specific size. Instead, try always to use relative sizes (with percentages). For example: instead of width: 150px, let it be...
Instead of border-top, try using the :after pseudo-element to recreate the effect you want. .box { width: 200px; height: 100px; border: 1px solid #ddd; position: relative; } .box:after { position:...
If you are using same css chunk on multiple elements, You can use @extend method of SASS. What it will do is combine multiple selector to a single class. i.e:...
Try something like this using replace() $('div.text').html(function(i,v){ return v.replace(/(^|\s[A-Za-z]\s|$)/g,'<b>$&</b>'); }); DEMO...
There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode. Currently, you won't be able to use them in any sort of production...
Using z-index you can push the overlay underneath other elements or put it back over the elements, fiddle: http://jsfiddle.net/ejnpP/4/ .overlay { background: rgba(0,0,0,.6); position: fixed; opacity: 0; -webkit-transition: opacity .3s;...
To solve this problem you should make your div float on the page using the poition:absolute css style but this is easly done with the correct addon to JQ addon...
This is an example for one way this could be done. Of course, you can experiment with diff methods and stuff, but this is a basic working solution. A dropdown...
Set the vertical-align property on the td td { vertical-align: top; } DEMO...
This can not be done through media queries, at least not your question. First step You need only one html file but 2 sets of javascript and css files. One...
Use font-size instead. div { font-size: 50px; } <div> <div>▼</div> <div>▲</div> <div>▼</div> </div> ...
Try following code. .center { width:300px; /*This is same as Countdown width in your javascript*/ margin: 0 auto; text-align:center; } <div class="center"> <script type="application/javascript"> var myCountdownTest = new Countdown({ month...
From looking at your example page, the posts-holder div also has a posts-grid class on the grid page, but it doesn't on the pages that only show one article. So...
Try this solution https://jsfiddle.net/yyt8eope/2/ I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside...
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are...
I simply added bottom: 100%; to the list and it worked perfect :)...
One fairly nasty way, loop decreasing the overflowing span until its less that the div width; var divWidth = $("#theDiv").width(); var text = $("#text"); var fontSize = 12; while (text.width()...
With jQuery - button or element that will stop the video has the attribute class='stopElementClass' $(function(){ $('.stopElementClass').on('click', function(){ $('#video_background').get(0).pause(); } }); Check out https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement...
In your css file you need to add div.footer-wfix { clear:left; } Should do the trick. ...
It's not difficult to find in the code, just inspect the element .toggle-topbar .menu-icon a span I've made a Fiddle that just has the code for the menu icon: http://jsfiddle.net/3HPLu/...
Instead of using keyframes use transition (Note: I've also added backface-visibility: true; and increased the rotation to -95deg to make the effect more similar to your example) .tile .front {...
Yes you can do this without scripting: <noscript> <div id="overLay">whatever</div> <style type="text/css"> body { overflow: hidden !important; } </style> </noscript> (You also need a # in your CSS rule: #overLay...
I haven't seen a need to in ages (like Safari 2). Make a new question about the actual problem you're having and someone can probably tell you how to fix...
Typically this kind of work is done by using the href of the anchor tag so that it can gracefully degrade in a non-javascript environment. Secondly, rather than passing the...
Change your css to this: #header_contain{ width:935px; height: 135px; background-image: url('bg.gif'); background-repeat: repeat-x; background-color:#E42323; } ...
If you're using autoprefixer, you don't need to use Compass's built-in transition mixins (since all they really do is apply browser prefixes). You're also having issues because translateX isn't the...
I would go with placing timeouts on both events, and activate the animation only if at the end of that timeout you still meet a condition. Something like that: var...
You can use Ext.dom.Element.setOpacity method: Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent Here is live demo Update If you are using Ext.Img component you will have...