純CSS：顯示圖像2上方/之上/上懸停

SOLVED FIDDLE頂部圖像1：純CSS：顯示圖像2上方/之上/上懸停

我不能懸停時會弄清楚如何顯示圖像（二）以上/過我目前可見的圖像（一）。

HTML：

<img class="two" src="img/2.png" alt="bulb"> 
<img class="one" src="img/1.png" alt="me">

CSS：

.one { 
display: block; 
margin: 0 auto; 
padding-top: 50px; 
} 

.two { 
opacity: 0; 
} 

.one:hover .two { 
opacity: 1; 
}

我在做什麼錯？

來源

2013-12-17 user3109752

嘗試'.one：hover + .two'而不是'.one：hover .two' –

編輯：如果您想在第一張圖片下方顯示另一張圖片，則需要更改DOM，因爲CSS無法選擇上一個元素，但可以選擇相鄰圖片，您正在使用的是.one:hover .two一個.two類嵌套在元素012xx上hover嵌套的元素，但由於元素是相鄰的，您可以使用下面的選擇器，但請注意，您需要更改DOM中的元素順序。

.one:hover + .two { 
    opacity: 1; 
}

Demo

我認爲以上意味着懸停要通過設置你的圖像交換圖像，因此，如果這就是你想要比使用CSS定位技術如何position: absolute;這是嵌套在position: relative;集裝箱內。

Demo

div { 
    position: relative; 
} 

div img { /* Setting images to absolute */ 
    position: absolute; 
    top: 0; 
} 

div img:nth-of-type(2) { /* Initially hiding image 2 */ 
    opacity: 0; 
} 

div:hover img:nth-of-type(1) { /* On hover of div we hide 1st image */ 
    opacity: 0; 
} 

div:hover img:nth-of-type(2) { /* On hover of div we show 2nd image */ 
    opacity: 1; 
}

您還可以添加transition財產順利交換上hover

Demo

div img { 
    position: absolute; 
    top: 0; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
}

來源

2013-12-17 05:30:15

感謝您的幫助！這就是我的意思與上面： http://jsfiddle.net/3m393/ 我用你的'下面的圖像'的方法和風格它是在上面。我希望它是最聰明的方式:) – user3109752

@ user3109752是的，我們可以很好地利用定位:)並歡迎您。 –

@ user3109752順便說一句，如果您將圖像封裝在'位置：相對;'父母和'位置'第二個圖像使用'位置：絕對;' –

圖像嘗試使用position:absolute並與包裝你的圖片

div.images{ 
    border:solid green 4px; 
    height:120px; 
    width:120px;; 
    margin-top: 50px; 
    position:relative; 
} 
.images img{ 
    position:absolute; 
    top:0; 
    left:0 
} 
.two {  
    opacity:0; 
    z-index:1; 
} 

.images:hover .two { 
    opacity: 10;  
}

DEMO

來源

2013-12-17 05:39:46 Sowmya

如果也沒關係，你的圖像之一來先你可以改變你的HTML這樣的：

，並使用這個CSS：

img.one:hover + img.two { 
opacity: 1; 
}

因爲e在CSS中沒有後向。

來源

2013-12-17 05:42:49

剛剛編輯同樣的東西:) –

純CSS：顯示圖像2上方/之上/上懸停

回答

相關問題