使用CSS在悬停时更改img标签的图像

Question

我有一个图像菜单.我想在链接激活时更改image为TD表格.

<table width="100%">
    <tr>
        <td align="left">
            <a href="http://pinkmodels.16mb.com/">
                <img src="http://i.imgur.com/jO3ni.jpg">
            </a>
        </td>
        <td align="center">
            <a href="http://pinkmodels.16mb.com/models/">
                <img src="http://i.imgur.com/utKcC.jpg">
            </a>
        </td>
        <td align="center">
            <a href="http://pinkmodels.16mb.com/blog/">
                <img src="http://i.imgur.com/h4JGE.jpg">
            </a>
        </td>
        <td align="center">
            <a href="http://pinkmodels.16mb.com/about/">
                <img src="http://i.imgur.com/M2GE8.jpg">
            </a>
        </td>
        <td align="right">
            <a href="http://pinkmodels.16mb.com/contact/">
                <img src="http://i.imgur.com/bWoe3.jpg">
            </a>
        </td>
    </tr>
</table>

Answer 1

而不是使用<img>标签background-image在CSS文件中使用属性.

例如,

table td a{
    display: block;
    background-image:url('FirstImageURL');
    /* other background properties like "background-size", if needed */
}

table td a:active{
    background-image:url('SecondImageURL');
}

要不然

您可以使用内容 css属性更改图像:( 在chrome中工作)

.className { /* or "img" */
    content:url('ImagePathURL');
}

工作小提琴.

您可以通过为每个img标记分配唯一的类(或Id)来完成上述操作.或者使用:first-child和:last-child选择器与+(兄弟)选择器组合使用.像这样的东西:

table > img:first-child{ /* css properties */ }                     /* first  child */
table > img:first-child + img{ /* css properties */ }               /* second child */
table > img:first-child + img + img { /* css properties */ }        /* third  child */
table > img:first-child + img + img + img { /* css properties */ }  /* fourth child */
table > img:last-child { /* css properties */ }                     /* fifth  child */

有关更多信息,请查看此链接.

我希望你知道CSS,因为你没有在代码中的任何地方使用:)