使用css悬停时更改img内的图片

Posted 2023-05-08

【中文标题】使用css悬停时更改img内的图片

【英文标题】：Changing picture inside img on hover with css

【发布时间】：2017-11-05 21:26:27

【问题描述】：

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

【问题讨论】：

请检查这个链接：你可以帮助这个链接。 Link 1Link 2

content of img tag 是什么意思？你的意思是src 属性？

无法仅通过css更改图片来源。

转到此链接：***.com/questions/2182716/…

CSS: Change image src on img:hover的可能重复

【参考方案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

【讨论】：

为什么不background-image？

@JonesJoseph 对不起。它在我的答案中。使用 javascript 或 css 背景图片

对！对不起，我没有注意到:)

好的，我喜欢。但我有一些图像，我只想改变我浏览过的图像，而不是全部。有什么想法吗？

@GP 我认为仅使用 css 解决方案是不可能的。使用必须使用 javascript./jquery

【参考方案2】：

你不能用纯 css，但可以帮助 Jquery。

$(document).ready(function()
  $('.nav li').hover(function()
        $('.target').attr('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLd77JVS_4xE04KaLd3E-j2pTyiO_fTcEwHgQL9tj8GMsXZQW2');
   ,function()
	$('.target').attr('src','http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg');
   )
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <ul class="nav" style="width: 100%">
   <li>
     Something
     <a title="D" itemprop="url" href="/Default.aspx">
        <span itemprop="name">Something</span>
        <img class="target" src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" style="vertical-align:middle; padding-left:5px; height:40px; width:70px" />
        </a>
    </li>
</ul>