html - 使用CSS在悬停时更改图片内的图片

Question

我需要在悬停时更改源 URL。

我试过了，但是不行:

这是我的CSS:

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 38px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #ffffff;
    border-top-color: #5f7ec7;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: #5f7ec7;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}
.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

这是我的 html:

<ul class="nav" style="width: 100%">
    <li>
        Something
        <a title="D" itemprop="url" href="/Default.aspx"><span itemprop="name">Something</span><img src="/images/Top-Menu-Layer/arrow_122b87.gif" style="vertical-align:middle; padding-left:5px; height:4px; width:7px" /></a>
       </li>
</ul>

我想通过 css 更改 html 中 img 标签的内容。我该怎么做 ？有什么建议吗？

Answer 1

使用 content:url("imageURL"); 注意[此方法仅适用于 chrome，不适用于 Firefox 或 IE]。

.image{
  width:100px;
  height:100px;
}

.image:hover{
    content:url("http://via.placeholder.com/350x150");
}

<img class="image"/>

最好的方法是使用 javascript，或者如果您想要一个完整的 css 解决方案，请使用 background-image 而不是 img 标签并更改 background-image悬停