gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 23:19:47 24 4
gpt4 key购买 nike

我需要在悬停时更改源 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 标签的内容。我该怎么做 ?有什么建议吗?

最佳答案

使用 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悬停

关于html - 使用CSS在悬停时更改图片内的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44363290/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com