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

这会在鼠标悬停时对图像产生发光效果。

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

我希望悬停效果仅应用于图像，并且恰好适用于它们的大小（可以假设所有图像的大小相同）。但我注意到悬停宽度延伸为名称的宽度（下面的行）。像这样：

image-hover

这是表格代码：

的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了。他们都明白没有前缀。）

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

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

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

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

1 个答案: