如何在HTML中用鼠标指针高亮显示当前渲染的线条？(不是表/行)

Question

我想在鼠标移动时突出显示当前行，可以吗？

它不是表格行，而是段落中的纯文本。

我正在为Google Chrome编写一个阅读助手插件，以帮助在大段文本中进行浏览。

Answer 1

这取决于你对“行”的定义。如果是表行或您可以引用的内容，则可以简单地执行以下操作

<table>
 <tbody>
   <tr>
     <td> Item 1</td><td> Item 2</td>
   </tr>
   <tr>
     <td> Item 1</td><td> Item 2</td>
   </tr>
  </tbody>
</table>

并在样式表中使用它

table tr:hover td {
      background-color: #dddddd;
}

Answer 2

如果要突出显示表行，请应用此选项

<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>

Answer 3

如果每一行都包含在自己的HTML元素中，则可以附加和事件处理程序。

<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>