使用CSS更改悬停时的img标签的图像 [英] Change image of img tag on hover using CSS

问题描述

我有一个图像菜单。当链接激活时，我想将映像更改为表。

I have a image menu. I want to change the image into TD table when the link is activated.

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

推荐答案

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

Instead of using <img> tags use background-image property in your CSS file.

，

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属性： 在中工作

You can change the image using content css property: (works in chrome)

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

工作小提琴 。

Id）到每个 img 标记。或者使用：first-child 和：last-child 选择器结合 + （ sibling ）选择器。这样的：

The above you can do by assigning unique classes (or Id's) to each img tag. or else using :first-child and :last-child selectors in combination with +(sibling) selector. Something like this:

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，你没有在你的代码中的任何地方使用：）

I hope you know CSS because you haven't used anywhere in your code :)

这篇关于使用CSS更改悬停时的img标签的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！