如何仅将鼠标悬停效果应用于表中的一行？

Question

我在html中有这种样式：

    <!-- hover style -->
    <style type="text/css"> .imgBox { no-repeat; } .imgBox:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } </style>
    <!-- hover style end -->

鼠标悬停在图像上产生发光效果。

图像显示在表格中。 在每个图像下都有一个名称。 像这样：

我希望将悬停效果仅应用到图像上，并确切地应用其尺寸（可以假设所有图像的尺寸相同）。 但是我注意到，悬停宽度随着名称的宽度而扩展（下面的行）。 像这样：

这是表代码：

CSS：

.researchers img{
    border: 2px;
    border-style: solid;
    border-color: black;
}

的HTML：

<div class="researchers">
    <table>
        <th colspan="4">
            TITLE
        </th>
        <tr>
            <td>
                <a href="default1.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
            </td>
            <td>
                <a href="default2.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
            </td>
            <td>
                <a href="default3.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
            </td>
            <td>
                <a href="default4.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
            </td>
        </tr>
        <tr>
            <td>
                Long Name
            </td>
            <td>
                name
            </td>
            <td>
                name
            </td>
            <td>
                name
            </td>
        </tr>
    </table>
</div>

Answer 1

（您不再需要box-shadow了。他们都知道没有前缀box-shadow 。）

将框阴影应用于img而不是框：

.imgBox:hover img {
    box-shadow: 0 0 10px #111;
}

证明： http ： //jsfiddle.net/rudiedirkx/cjsbttsd/