Question

我有一张表格，其中包含td onMouseOver功能，可更改td的背景颜色。 td中的文本是一个链接。我遇到的问题是链接出现＆＃34;突出显示＆＃34;当鼠标悬停在td上时，除非鼠标悬停在链接本身上，否则无法点击鼠标。换句话说，有一种＆＃34;缓冲区＆＃34;链接文本周围的区域，但在td的边界内，其中背景颜色已更改，但光标仍然是标准指针（并且无法单击链接）。有没有办法让整个td成为一个链接，还是我必须使用两个不同的图像来获得所需的效果？

示例代码：

<table>
    <tr>
        <td onMouseOver="bgColChange();" style="background-color:#ffffff;">
            <a href="www.mysite.com/locn1">Location 1</a>
        </td>
    </tr>
</table>

Answer 1

您可以执行以下操作：

<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上添加td，其ID为锚标记

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

Demo Fiddle

我想这就是你要找的东西。

Answer 2

根据我的理解，你想要一个带有链接的TD元素，你想要：

在悬停时更改BG颜色
使整个TD元素可点击链接

首先要注意的是您使用的是内联JavaScript。这意味着您将原始JavaScript代码放入HTML中。这不是一个好的做法或惯例。在过去几年中，JavaScript社区已逐渐脱离内联JavaScript。

相反，更好的方法被称为＆＃34;不引人注目的JavaScript＆＃34;这是一个奇特的名称，意味着您可以为您的HTML元素提供可在JavaScript和CSS文件中引用的类/ ID名称。

这Wikipedia Article on Unobtrusive JavaScript非常善于展示差异。需要注意的是，不引人注目的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;
}

Here is a JS Fiddle example that works without using any JavaScript

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

您只需要在TABLE元素中添加一个自定义类，以便可以将CSS样式附加到它。我在JS Fiddle中添加了几条评论，所以一定要查看它们。您还可以使用JS Fiddle示例来帮助您进一步理解它。

使用onMouseOver函数在td内创建链接的最佳方法？

2 个答案: