hover only one row when mouse over
please help me resolve the problem :)
HTML :
<body>
<div>
<header></header>
<nav>
<table align="left" border="1">
<tr>
<td>
<div class="mainmenu">
aaa
</div></td>
</tr>
<tr class="b">
<td>
<table align="left" border="1" class="submenu">
<tr>
<td>
<p class="1">
aaaaa
</p></td>
</tr>
<tr>
<td>
<p class="1">
bbbbbbb
</p></td>
</tr>
<tr>
<td>
<p class="1">
ccccccccccccccccccccc
</p></td>
</tr>
<tr>
<td>
<p class="1">
ddddd
</p></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<div class="menu">
bbbbbbb
</div></td>
</tr>
<tr>
<td>
<div class="menu">
ccccccccccccccccccccc
</div></td>
</tr>
<tr>
<td>
<div class="menu">
ddddd
</div></td>
</tr>
</table>
CSS : `
body {
background-color: orange;
color: white;开发者_运维技巧
}
main{
color: blue;
width: 80%;
}
table.submenu{
background-color: #FF0033;
}
Jquery script:
$(document).ready(function() {
$('tr.b').hide();
$('div.mainmenu').click(function() {
$('tr.b').toggle(400);
return false;
});
$('div.mainmenu, .menu').hover(function() {
$('div.mainmenu, .menu').css('color', 'pink');
}, function() {
$('div.mainmenu, .menu').css('color', 'white');
});
});
$(document).ready(function() {
$('tr.b').mouseover(function() {
$('p.1').css('color', 'blue');
});
$('tr.b').mouseout(function() {
$('p.1').css('color', 'gray');
});
});
WORKING DEMO
use $(this)
$(document).ready(function() {
$('tr.b').hide();
$('div.mainmenu').click(function() {
$('tr.b').toggle(400);
return false;
});
$('div.mainmenu, .menu').hover(function() {
$(this).css('color', 'pink');
}, function() {
$(this).css('color', 'white');
});
});
$(document).ready(function() {
$('p.1').mouseover(function() {
$(this).css('color', 'blue');
});
$('p.1').mouseout(function() {
$(this).css('color', 'gray');
});
});
before anything else, I'm curious why you immediately bothered with JavaScript codes, in this case, using the jQuery library? You can pretty much achieve that with very few CSS codes.
Revising Your Code (With a few corrections):
The Markup:
<table summary="a brief description of this table" border="1">
<caption>Title of this table</caption>
<thead>
<tr>
<th>Column Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</table>
The CSS:
body {
background: #FA0;
color: #FFF;
}
table {
border-collapse: collapse;
}
tr:hover {
background: #F03;
}
A more practical solution:
The solution in your problem is to use the pseudo-class selector (:hover) in the <tr>, so whenever you point your mouse on that row, it will change its style. It's more easy and convenient than immediately using jQuery (which will just increase your page's file size, which in the future, will affect the performance of your site).
Further Notes:
- The attribute
align="left"is already deprecated, avoid using it, use CSS instead (text-align: left). - By default, the alignment of html is
ltr(left-to-right), so you don't really need to declare that on the<table>. - You need to provide a
<caption>so users will know what the<table>is all about. - You should at least provide a
summaryto tell screen readers what's its purpose (it's the long version of<caption>, but a more detailed one). - You are missing
<thead>,<tbody>, and<tfoot>. They are required in XHTML (if you ever plan to use it), and they are also useful to tell people who read your code where those<tr>belong to. - Why are you immediately using jQuery (or JavaScript codes)? Isn't it more practical to do this in CSS? Less is more.
- Your color combination is bad, too low in contrast. Mixing a light foreground color with a light background color is a very bad idea.
- You should avoid using any named property values in CSS, because they tend to be inconsistent across browsers, the recommended approach is to use the short hexadecimal values.
- Last, but not the least. You are placing too many
<div>s for no reason, and what are you trying to achieve on nesting tables inside another table? That will bloat your UI in the future, in my opinion.
加载中,请稍侯......
精彩评论