Javascript 表格单元 mouseover()答案

【问题标题】：Javascript Table Cell mouseover()Javascript 表格单元 mouseover()
【发布时间】：2020-09-16 14:43:45
【问题描述】：

我有一个表 mytable1 包含 3 行和 td 元素。当我有 6 行时，下面的代码工作正常。但是当我有 3 行时它不起作用。任何指南都会有所帮助。

注意：使用下面的代码，当用户将鼠标悬停在表格图像上时，光标会改变。

我的代码

$(document).ready(function() {
    $("#mytable1 tr:has(td)").mouseover(function(e) {
        $(this).css("cursor", "pointer");
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" table-layout="fixed" width="100%" style="margin-top: 0px; float:top;"> 
      <tr>
         <td><span>Design Code : A0001</span></td>
         <td><span>Design Code : A0002</span></td>
      </tr>
      <tr>
         <td><a><img src="Images/Img1.jpg"></a></td>
         <td><a><img src="Images/Img2.jpg"></a></td>
      </tr>
      <tr>
         <td><span>Colour : Wite</span></td>
         <td><span>Colour : Red</span></td>
      </tr>
 </table>

【问题讨论】：

使用 mouseover 而不是普通的 CSS 规则有什么意义？
这似乎在您提供的 sn-p 中有效。你的问题是什么？但是，这不是如何使用 css-properties。首先，您只需设置cursor: pointer; 即可完成：鼠标指针在悬停时将变为手形符号（即使不使用伪类）。其次，css-property 是永久设置的，不会在鼠标离开时取消设置。
谢谢卢普兹。令人困惑的是，当我有 6 行时，上面的代码运行良好。但是当我有像上面那样的 3 行时，它不起作用......
您的问题代码中有 3 行。它似乎工作正常。您希望该脚本做什么？
不，它不工作

标签： javascript html jquery mouseover

【解决方案1】：

您的代码可以满足您的需求。运行下面的 sn-ps。

6 行示例：

$(document).ready(function() {
    $("#mytable1 tr:has(td)").mouseover(function(e) {
        $(this).css("cursor", "pointer");
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" table-layout="fixed" width="100%" style="margin-top: 0px; float:top;"> 
      <tr>
         <td><span>Design Code : A0001</span></td>
         <td><span>Design Code : A0002</span></td>
      </tr>
      <tr>
         <td><a><img src="Images/Img1.jpg"></a></td>
         <td><a><img src="Images/Img2.jpg"></a></td>
      </tr>
      <tr>
         <td><span>Colour : White</span></td>
         <td><span>Colour : Red</span></td>
      </tr>
            <tr>
         <td><span>Design Code : A0001</span></td>
         <td><span>Design Code : A0002</span></td>
      </tr>
      <tr>
         <td><a><img src="Images/Img1.jpg"></a></td>
         <td><a><img src="Images/Img2.jpg"></a></td>
      </tr>
      <tr>
         <td><span>Colour : White</span></td>
         <td><span>Colour : Red</span></td>
      </tr>
 </table>

3 行示例

$(document).ready(function() {
    $("#mytable1 tr:has(td)").mouseover(function(e) {
        $(this).css("cursor", "pointer");
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" table-layout="fixed" width="100%" style="margin-top: 0px; float:top;"> 
      <tr>
         <td><span>Design Code : A0001</span></td>
         <td><span>Design Code : A0002</span></td>
      </tr>
      <tr>
         <td><a><img src="Images/Img1.jpg"></a></td>
         <td><a><img src="Images/Img2.jpg"></a></td>
      </tr>
      <tr>
         <td><span>Colour : Wite</span></td>
         <td><span>Colour : Red</span></td>
      </tr>
 </table>

【讨论】：