I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?
I've tried this:
tr:hover {
background: #000;
}
But that doesn't work. Using td:hover works, but I want to change the background colour of the whole table row.
Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?
<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}
You could try:
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
JS Fiddle demo.
I had the same problem:
tr:hover { background: #000 !important; }
allone did not work, but adding
tr:hover td { background: transparent; }
to the next line of my css did the job for me!!
My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.
Actually, I used it with a classnames:
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thanks for these answers, they made my day!! :)
This will work:
tr:hover {
background: #000 !important;
}
If you want to only apply bg-color on TD then:
tr:hover td {
background: #c7d4dd !important;
}
It will even overwrite your given color and apply this forcefully.
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
only someclass cell highlight
tr:hover td {background-color:#000;}
You can give the tr an id and do it.
tr#element{
background-color: green;
cursor: pointer;
height: 30px;
}
tr#element:hover{
background-color: blue;
cursor: pointer;
}
<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>
its easy . Just add !important at the end of your css line :
tr:hover { background: #000 !important; }
Try it
<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>
Related
I'm trying to select one specific table on one html page to be formatted with css. I do not want any other tables anywhere else, including on the same page, to be formatted this way.
I tried this inside the header but it did not work-
<style>
#table3 {
td,th { padding: 10px }
tr:hover { background-color: #f5f5f5 }
}
</style>
<table id="table3">
...
</table>
You can't nest selectors like that. At least not in normal CSS.
You want:
<style>
#table3 td, #table3 th { padding: 10px }
#table3 tr:hover { background-color: #f5f5f5 }
</style>
<table id="table3">
...
</table>
This wont work because this isn't the format for CSS, although the concept is right in what you have done the format isn't correct.
Try this...
#table3 td, #table3 th {
padding: 10px;
}
#table3 tr:hover {
background-color: #f5f5f5;
}
However, if you would like to do it the way in which you did it. You could do it with a CSS compiler such as less, which you can view online as less js, it makes CSS lightweight and a lot easier to write.
The way you wrote it looks more like SCSS. If you need plain CSS, this is how it should look like:
<style>
#table3 TD {
padding: 10px;
}
#table3 TH {
padding: 10px;
}
#table3 tr:hover {
background-color: #f5f5f5;
}
</style>
<table id="table3">
...
</table>
Hi i have this piece of CSS:
tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
tbody:hover tr:hover td {
color: #444;
text-shadow: 0 1px 0 #fff;
}
When i hover a row of a table i want that the other rows of that table become transparent. This CSS work for the normal td filled with text, but for the td filled with link(a tag) it doesn't work. I can't find why.
This is a part of the HTML code
<tbody>
<tr>
<td>Untitled.txt</td>
<td>File di prova</td>
<td><a href='/comment/comment.php?idF=182' style='color: black;'>Leggi i commenti</a></td>
<td><a href='get_file.php?id=182' style='color: black;'>Download</a></td>
</tr>
</tbody>
This is simple. Your a tags have inline styles. Those have a high ranking in css hierarchy. So the reason why this doesn't work is this piece of code:
style='color: black;'
Remove the inline style and apply it via class instead.
I'm not sure if it's possible to make others transparent using CSS only (CSS can not effect on previous siblings). however, you can't use :hover twice, unless you do something like this:
tbody tr:hover > td, tbody tr:hover > td a {
color: #444;
text-shadow: 0 1px 0 #fff;
}
In order to find a solution for the transparency issue, you may try to use nth-child() to decide which child will be changed on hover. for example:
tbody tr:nth-child(1):hover {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
You can also decide what to do when the element is not hovered, example:
tbody tr:nth-child(1):not(:hover) {
// If element is not hovered
color: transparent;
text-shadow: 0 0 3px #aaa;
}
Try using inherit property:
a {
color: inherit !important; //important just for extra measure
}
I think you should put the a tag in your CSS too .
tbody:hover td, tbody:hover td a {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
I styled my Table with different colors on every row (odd/even), but when hovering over one row, it should change it's color. It works well on PC but for some reason it changes every of the rows' colors to the same color in my iPhone when clicking one of the rows. This is an example using the same CSS I used.
.tablestyle tr
{
background: #b8d1f3;
}
.tablestyle tr:nth-child(odd)
{
background: #b8d1f3;
}
.tablestyle tr:nth-child(even)
{
background: #dae5f4;
}
.tablestyle tr:hover
{
background: #7CAAE9;
}
.tablestyle tr:first-of-type
{
background: #2470D5;
}
<table class="tablestyle" border="1" style="width:70%">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</table>
I couldn't find anything wrong with this code, but why then it changes every of the rows' colors?
Say I have a header and a list of 10 rows. How would I change the text color of rows 1-3 using a pseudo class?
tr:nth-child(odd) {
background-color: #a9cdeb;
}
tr td:last-child{
font-style: italic;
}
tbody tr: {
color: #FF0004;
}
Here is a Fiddle
You should try this.
tr:nth-child(3), tr:nth-child(4), tr:nth-child(5){
color: red;
}
Demo
If my understanding is right, You can try this
tr:nth-child(odd) td{ /* select odd rows cell */
color: #fff; /* applied white color */
}
OR you can try this
tr:nth-child(-n+5) td{ /* this will include <th> rows so i have used -5 */
color: blue;
}
Updated Demo
Demo
You may try this
tr:nth-child(3),tr:nth-child(4),tr:nth-child(5){
color:red;
font-family: cursive;
}
It change both font and color.
DEMO
You can try this:
tr:nth-child(-n+5) td {
background-color: #a9cdeb;
}
Demo
I am making calendar view for my php website.
I have one table with n rows. and in that table odd rows have light green background and even have light pink background.
and after that i have some div which are place on the corresponding tr with z-index: 8 css property.
But i want to give them dark background than their background table row.
Like divs which comes over pink row should have dark pink background and green row divs should have dark green background.
both the table and div are being developed automatically by jquery code.
can anyone help me in this that how can i achieve this ?
I am doing it in jquery fullcalendar resource view .
My some html and css code is :
css :
.fc-border-separate tr th{
background: #BFDBFF;
}
.fc-border-separate tr:nth-child(odd) td{
background: #D7FFD7;
}
.fc-border-separate tr:nth-child(even) td{
background: #FFD5FF;
}
.fc-event {
border-style: solid;
border-width: 0;
font-size: .85em;
cursor: default;
}
a.fc-event,
.fc-event-draggable {
cursor: pointer;
}
a.fc-event {
text-decoration: none;
}
.fc-rtl .fc-event {
text-align: right;
}
.fc-event-skin {
border-color: #36c; /* default BORDER color */
background-color: #36c; /* default BACKGROUND color */
color: #fff; /* default TEXT color */
}
.fc-event-inner {
position: relative;
width: 100%;
height: 100%;
border-style: solid;
border-width: 0;
overflow: hidden;
}
html :
<table class="fc-border-separate tblcalendar">
</table>
<div class='fc-event fc-event-skin fc-event-inner' style='position: absolute; z-index:8'>
</div>
Is this what you're looking for?
The basic idea is to use the pseudo-class :nth-child(odd) and :nth-child(even), like so:
tr:nth-child(odd) {
background-color:lightgreen;
height:60px;
}
tr:nth-child(even) {
background-color:pink;
}
tr:nth-child(odd) div {
background-color:green;
}
tr:nth-child(even) div {
background-color:red;
}