HTML更改帶有轉換的圖像？

我一直在嘗試HTML5的一點，我想嘗試使圖片更改時，鼠標盤旋在它上面。我嘗試了幾種方法，但都沒有達到預期效果。我已經瀏覽了多個教程，但他們主要解釋瞭如何將效果添加到相同的圖像，而不是完全改變它。HTML更改帶有轉換的圖像？

這是代碼，我現在，按預期它並不實際工作：

ul.imagetransition li img:hover { 
 
    background-image: url('Data/Images/Image 1Hover.png'); 
 
}

<section> 
 
    <ul class="imagetransition"> 
 
    <li><a href="http://testlink.com"><img src="Data/Images/Image 1.png"/></a></li> 
 
    </ul> 
 
</section>

在這段代碼中，原始圖像被正確預覽，但是當鼠標懸停在它立即增加一個小部分的第二圖像到第一個。我試過添加過渡效果代碼，但它沒有任何效果。我會對此做更多的研究，如果有人知道/瞭解如何完成這項工作，請指點我正確的方向！：d

請讓我知道，如果進一步的信息需要

不勝感激/代碼，有一個好的一天

來源

2017-02-10 Saif A Baky

它是否適合你？

HTML：

<ul> 
    <li id="aaa"> 
     <img class="bottom" src="a.jpg"> 
     <img class="top" src="b.jpg"> 
    </li> 
</ul>

CSS：

#aaa { 
    position:relative; 
    height:100px; 
    width:100px; 
    margin:0 auto; 
    list-style-type: none; 
} 

#aaa img { 
    position:absolute; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#aaa img.top:hover { 
    opacity:0; 
}

來源

2017-02-10 14:44:15 Plenarto

是的，我相信會的工作了。但有沒有辦法在保持** UnorderedList **的同時獲得這種效果？ –

已編輯，是否適合您？ – Plenarto

是的，它在一個空的HTML頁面上工作。但由於某些原因，當我在當前HTML頁面上實現此代碼時，這兩個圖像都不會顯示。我甚至已經檢查了Z-指數，但它可能心不是的情況下 –

從過去的經驗，除非你使用JS的的getElementById和更改背景圖片的src這是不行的。如果不是這樣，通過使用父使用兩個一種東西像

<div id="parent1"> 
 
<ul></ul> 
 
</div>

在哪裏，如果你將鼠標懸停在它的第一個背景必須爲0的不透明度和UL的不透明度爲一個/孩子的關係和激活，或者可能嘗試添加!important在第二個背景圖像限制像填充不會工作因爲只會分離您的圖像甚至更多。

希望這會有所幫助。

PS：我在寫這我的電話：/，但現在我用我的筆記本電腦

這編輯是一些例子使用JS

the mouseover thing

and this is for the change image thing

我想你可以將這些細分在一起。

來源

2017-02-10 15:19:34 Arkonsol

HTML

<img class="bottom" src="a.jpg">

CSS

img 
{ 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: width 2s; 
    transition: width 2s; 
} 
img:hover { 
    width: 300px; 
}

來源

2017-02-10 17:32:07

HTML更改帶有轉換的圖像？

回答

相關問題