Javascript 使用onMouseOver功能在td内部创建链接的最佳方法？

我有一个表，其中包括一个带有onMouseOver函数的td，该函数可以更改td的背景色。td中的文本是一个链接。我遇到的问题是，当鼠标悬停在td上时，链接会高亮显示，但除非鼠标悬停在链接上，否则无法单击链接。换句话说，链接文本周围有一个缓冲区，但在td的边界内，背景颜色发生了变化，但光标仍然是标准指针，无法单击链接。有没有办法使整个td成为一个链接，或者我必须使用两个不同的图像才能获得想要的效果

示例代码：

您可以这样做：

---

我想这就是你想要的。

据我所知，你想要一个TD元素，里面有一个链接，你想要：

悬停时更改背景颜色 使链接的整个TD元素可单击 首先要注意的是，您使用的是内联JavaScript。这意味着您正在将原始JavaScript代码放入HTML中。这不是一个值得遵循的良好做法或惯例。在过去的几年里，JavaScript社区已经不再使用内联JavaScript

相反，更好的方法称为UnobtrusiveJavaScript，这是一个花哨的名称，意味着您可以为HTML元素提供类/ID名称，以便在JavaScript和CSS文件中引用

这很好地展示了它们之间的区别。值得注意的是，不引人注目的JavaScript是首选做法，应该尽可能多地使用

我知道在一些特殊的情况下仍然需要内联JS，但您的问题是不需要任何JavaScript。您只需要使用一些特定的CSS。通常情况下，最好的解决方案是最简单的

# HTMl file
# ----------------------------------------
<table class="custom">
    <tr>
        <td>
            <a href="www.mysite.com/locn1">Location 1</a>
        </td>
    </tr>
</table>


# CSS file
# # ----------------------------------------
.custom {
    width: 100%;
}

/* Give TD element padding so you can see that link expands properly */
.custom td {
    border: 1px solid black; /* For visual aid */
    padding: 10px;
}

/* Change background color on hover of TD element */
.custom td:hover {
    background: #ccc;
}

/* Change link color when hovering over TD element */
.custom td:hover a {
    color: #fff;
}

/* Make link expand to entire TD element (its parent) */
.custom td a {
    display: block;
    text-decoration: none;
}

此解决方案是首选方案，因为它不使用JavaScript，并且作为其他开发人员更容易理解

---

您只需要将自定义类添加到表元素中，就可以将CSS样式附加到它。我在JS Fiddle中添加了一些注释，所以一定要查看它们。您还可以使用JS Fiddle示例来帮助您进一步理解它。

您可以执行以下操作：anchor_元素{display:block；width:100%；height:100%；}您还可以使用CSS更改背景。例如，见。谢谢。在td内的任何东西周围似乎仍然存在缓冲区问题。在您提供的示例中，td padding 20px似乎创建了缓冲区，因此除非我将padding减少到0px，否则我仍然会遇到相同的问题。我不确定我是否理解缓冲区。如果单击TD元素中的任意位置，它将激活jsfiddle示例中的链接。你能解释清楚一点让我明白你想做什么吗？我以为你只是想要一个链接，当点击TD元素中的任何地方时激活。我想你必须原谅我，我不是一个真正的HTML专家。TD不是包含了表格边界内的所有内容，还是填充设置了TD边界的限制？当前，如果我将鼠标悬停在可见边框内表格的任何部分上，背景颜色会发生变化，但除非我直接单击链接或其右侧，否则链接不会被激活。

<table>
    <tr>
        <td class="myTD0" onMouseOver="bgColChange();" style="background-color:red;cursor:pointer;" onClick="document.getElementById('myLink0').click();">
            <a href="www.mysite.com/locn1" id="myLink0">Location 1</a>
        </td>
    </tr>
</table>

 onclick="document.getElementById('myLink0').click();"

# HTMl file
# ----------------------------------------
<table class="custom">
    <tr>
        <td>
            <a href="www.mysite.com/locn1">Location 1</a>
        </td>
    </tr>
</table>


# CSS file
# # ----------------------------------------
.custom {
    width: 100%;
}

/* Give TD element padding so you can see that link expands properly */
.custom td {
    border: 1px solid black; /* For visual aid */
    padding: 10px;
}

/* Change background color on hover of TD element */
.custom td:hover {
    background: #ccc;
}

/* Change link color when hovering over TD element */
.custom td:hover a {
    color: #fff;
}

/* Make link expand to entire TD element (its parent) */
.custom td a {
    display: block;
    text-decoration: none;
}