How to highlight current rendered line at mouse pointer, in HTML? (Not table/rows)
I want to highlight the current line when mou开发者_Python百科se moves, is it possible?
It's not table rows, just plain text in paragraphs.
I'm writing a reading helper plugin for Google Chrome, to help browsing within a big chunk of text.
Depends on your definition of "line". If it's a table row or something you can refer to, you can simply do something like this
<table>
<tbody>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
</tbody>
</table>
And use this in your stylesheet
table tr:hover td {
background-color: #dddddd;
}
If you want to highlight Table row then apply this
<STYLE>
<!--
tr { background-color: #DDDDDD}
.initial { background-color: #DDDDDD; color:#000000 }
.normal { background-color: #CCCCCC }
.highlight { background-color: #8888FF }
//-->
</style>
<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
<tr>
<td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
</tr>
<tr style="background-color:#CCCCCC;"
onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td>Row A</td>
<td>200x300</td>
<td>$200,000.00</td>
</tr>
</table>
If each line is enclosed with in HTML element of there own the and event handler can be attached.
<html>
<script type="text/javascript" src="./jquery-1.4.2.min.js"> </script>
<script type="text/javascript" >
$(document).ready(function() {
$(".lineclass").hover(function() {
$(this).css("backgroundColor","red");
},
function() {
$(this).css("backgroundColor","");
});
});
</script>
<body>
<p class="lineclass">This is line 1</p><br />
<p class="lineclass">This is line 2</p><br />
<p class="lineclass">This is line 3</p><br />
</body>
</html>
加载中,请稍侯......
精彩评论