infinity001
Posts: 2
|
| Posted: 09/10/2015, 1:23 AM |
|
Hello
I want to make change on background color at row when I hover over the row.
Example of row is:
<tr class="Row">
<td>{test1}</td>
<td>{test2}</td>
<td>{test3}</td>
<td>{test4}</td>
</tr>
I tried to make in Style_doctype.css this:
.Row:hover {
background-color: #CCCCCC;
}
But only one table(cell) in that row will change on hover over the row.
Also tried:
.Row :hover tr{
background-color: #CCCCCC;
}
And then still nothing.
I tried with Javascript also and still nothing:
<tr class="Row" onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
----------------------
<script type="text/javascript">
// Specify the normal table row background color
// and the background color for when the mouse
// hovers over the table row.
var TableBackgroundNormalColor = "#ffffff";
var TableBackgroundMouseoverColor = "#9999ff";
// These two functions need no customization.
function ChangeBackgroundColor(row) { row.style.backgroundColor = TableBackgroundMouseoverColor; }
function RestoreBackgroundColor(row) { row.style.backgroundColor = TableBackgroundNormalColor; }
</script>
How to get entire row to be changed for background color on hover?
Thanks.
<tr class="Row">
|
 |
 |
MichaelMcDonald
Posts: 640
|
| Posted: 09/10/2015, 4:17 AM |
|
http://www.w3schools.com/jquery/event_hover.asp
jquery
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
There will be a name somewhere for the TD element that does on row hover with down & up arrow...
Also, there is a bootstrap theme which does it...
One of these does it CSS can't remember which one....
https://bootswatch.com/
_________________
Central Coast, NSW, Australia.
|
|
|
|
infinity001
Posts: 2
|
| Posted: 09/10/2015, 7:14 AM |
|
Quote MichaelMcDonald:http://www.w3schools.com/jquery/event_hover.asp
jquery
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
There will be a name somewhere for the TD element that does on row hover with down & up arrow...
Also, there is a bootstrap theme which does it...
One of these does it CSS can't remember which one.... https://bootswatch.com/
It doesn't work if I change "p" to "tr" element.
Actually, all these scripts (css, javascript or jquery) work if I remove class Row from <tr> element. But if that class is mention then there are no effects.
I want to keep class Row in tr element and add hover effect of changing background.
|
|
|
|
MichaelMcDonald
Posts: 640
|
| Posted: 09/10/2015, 1:46 PM |
|
Just some stuff to try:
Give the table an id such as table_hover, then using using jquery add multiple classes definitions.
This example is from bootstrap using it's table css elements and maybe see if you can further append the class definitions with Row from your stylesheets...
<script type="text/javascript">
$().ready(function() {
$('#table_hover).attr('class', "table table-condensed table-responsive table-bordered Row");
}
});
</script>
I am using jquery for everything these days as there is much more cross browser support. A specific example of this is using jquery's AJAX POST instead of js's httpxmlrequest. All the good credit card/payment processing sites have gone over to jquery too.
_________________
Central Coast, NSW, Australia.
|
|
|
|
|
