简体   繁体   中英

How to apply mouse hovering effect only on one row in a table?

I have this style in 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 -->

Which makes a glowing effect over the image on mouse hover.

The images are presented in a table. Under each image there's a name. Like this:

图片

I want the hover effect to apply only on the images, and exactly at their sizes (it's ok to assume all images are the same size). But i noticed that the hovering width stretches as the name's width (the row below). Like this:

图像悬停

Here's the table code:

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>

(You don't need the prefixed box-shadow anymore. They all understand the unprefixed.)

Apply the box shadow to the img instead of the box:

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

Proof: http://jsfiddle.net/rudiedirkx/cjsbttsd/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM