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

【问题标题】：Change image of img tag on hover using CSS使用 CSS 更改悬停时 img 标签的图像
【发布时间】：2016-10-25 22:55:28
【问题描述】：

我有一个图像菜单。我想在激活链接时将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>

【问题讨论】：

在任何人担心这些链接另一端的内容之前，那里没有什么不好的。它是 PG 级的。

标签： css image html-table

【解决方案1】：

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

例如，

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');
}

否则

您可以使用content css 属性更改图像：（适用于 chrome）

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

Working Fiddle.

您可以通过为每个img 标记分配唯一的类（或ID）来完成上述操作。或者将:first-child 和:last-child 选择器与+(sibling) 选择器结合使用。像这样的：

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

更多信息请查看link。

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

【讨论】：

【解决方案2】：

a:visited img ,a:active img
{
content:url('change img link as you want);
}

【讨论】：

但我为每个按钮都有单独的图像

【解决方案3】：

两个选择：

JavaScript 解决方案：

var links = document.getElementsByTagName("a");
var n = links.length;
for(var i = 0; i < n; i ++) {
    var cur = links[i];
    if(cur.getAttribute("href") == window.location) {
        cur.parentNode.childNodes[1].src = "http://i.imgur.com/newimagesrc.png";
    }
}

纯 CSS 解决方案：

不要使用img标签，而是使用div和background-image，HTML看起来像：

<table width="100%">
    <tr>
        <td align="left"><a href="http://pinkmodels.16mb.com/">
            <div class = "image first"></div>
        </a></td>

CSS：

a:active > .image.first {
     background-image: url(newimageurl.png);
}

【讨论】：