更改IMG圖片懸停與CSS

我都試過，但將無法工作：

這是我的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標籤。我該怎麼做？有什麼建議？

來源

2017-06-05 G P

請查看此鏈接：你可以幫助這個鏈接。 [鏈接1]（https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover）[鏈接2]（https://stackoverflow.com/questions/18813299/changing-image -on-hover-with-css-html） –

「img tag」的含義是什麼意思？你的意思是'src'屬性？ –

這是不可能的，只能通過CSS來改變圖像源。 – Chris

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

來源

2017-06-05 07:01:10 XYZ

爲什麼不'background-image' ？ –

@JonesJoseph對不起。它是在我的答案。使用JavaScript或css背景圖片 – XYZ

對！對不起，我注意到'：）' –

你不能用純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(){ 
 
\t $('.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>

來源

2017-06-05 07:16:37 Ehsan

更改IMG圖片懸停與CSS

回答

相關問題