jQuery hover effect over table
I am new to jQuery and I am trying to make a hover effect on my table but I don't know how. I would like to make only the text red and then how to remove the red color again when the focus has been lost.
This is what I have so far:
<script type="text/javascript">
$(function() {
$('tr').hover(function() {
$(this).css('color', 'red')
开发者_如何转开发});
});
</script>
<table border="1">
<tr>
<th>ID</th>
<th>name</th>
</tr>
<tr>
<td>#1</td>
<td>ole</td>
</tr>
<tr>
<td>#2</td>
<td>jeffrey</td>
</tr>
<tr>
<td>#3</td>
<td>collin</td>
</tr>
<tr>
<td>#4</td>
<td>eve</td>
</tr>
</table>
All you need to do is pass another function to hover for the mouse leave.
$('tr').hover(function() {
$(this).css('color', 'red');
}, function() {
$(this).css('color', '');
});
See example on jsfiddle.
Or you could do it only in css as well.
tr:hover{
color:red;
}
IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements. from here.
You need to add handler out on hover. See it here : http://jsfiddle.net/bF9xy/ documentation here : http://api.jquery.com/hover/
$(function() {
$('tr').hover(function() {
$(this).css('color', 'red')
},function() {
$(this).css('color', 'black')
}
);
});
.hover() function in jQuery takes two arguments: one function for the mouse in event and a second function for the mouse out:
$('dom element').hover(function()
{
//your code for mouse over
}, function()
{
//your code for mouse out
});
PS: in general, in a situation like your one, is better change the class of the element instead of the css attribute itself. Use .addClass() and .removeClass(). This way it will be easier to canghe the hover effect in the future, just by changing css instead of javascript.
<style type="text/css">
.highlight { background-color:red; }
<style>
<script>
$(
function()
{
$("table>tr").hover(
function()
{
$(this).addClass("highlight");
},
function()
{
$(this).removeClass("highlight");
}
)
}
)
</script>
A little workaround :
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$('tr').hover(function() {
$(this).css('color', 'red')
});
$('tr').mouseout(function() {
$(this).css('color', 'black')
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>name</th>
</tr>
<tr>
<td>#1</td>
<td>ole</td>
</tr>
<tr>
<td>#2</td>
<td>jeffrey</td>
</tr>
<tr>
<td>#3</td>
<td>collin</td>
</tr>
<tr>
<td>#4</td>
<td>eve</td>
</tr>
</table>
</body>
</html>/
Since styles are usually more complicated than red text, you might consider going this route:
$(function() {
$('tr').hover(function() {
$(this).toggleClass('redHover')
}, function() {
$(this).toggleClass('redHover')
});
});
redHover would be something like
<style>
.redHover{
color:red;
}
</style>
Then you can change to the style without rewriting your jQuery.
加载中,请稍侯......
精彩评论