使用css將一個div懸停在其他一些不透明的div上

我的要求是讓底部的div與另一個div重疊，就像您在第一張圖片中看到的一樣，當您將鼠標懸停在圖像上時，我需要它獲取效果就像在第二張圖片中一樣。使用css將一個div懸停在其他一些不透明的div上

enter image description here

這裏是我的html代碼，但我不知道如何正確處理鼠標事件。

<div id="container"> 
    <div class="overlay">This is overlay div.</div> 
    <div class="content">This is contents div. This is contents div.</div> 
</div> 


#container { 
    position: relative; 
} 

.overlay, 
.content{ 
    display:block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 



.overlay, 
.content{ 
    display:block; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

但它不起作用，因爲我想。任何人都可以給我一些建議嗎？

來源

2013-09-29 Shabarinath Volam

可以看到你們的代碼嗎？ – Jacques

嘗試http://jsfiddle.net/arunpjohny/MhB8n/2/ –

Thanx @ArunPJohny這是我需要的確切要求 –

http://jsfiddle.net/mAzsL/

這裏你去的人。

<div class="container"> 
    <div class="lower">Blah Blah Blah</div> 
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div> 
</div> 

.container{ 
    width:250px; 
    height:300px; 
    background:#00f; 
    position:relative; 
} 

.lower{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    color:#fff; 
    padding:10px 0; 
    text-indent:5px; 
    background:rgba(0,0,0,.5); 
} 

.show{ 
    display:none; 
    height:100%; 
    width:100%; 
    color:#000; 
    text-indent:5px; 
    background:rgba(255,255,255,.5); 
} 

.container:hover > .lower{ 
    display:none; 
} 

.container:hover > .show{ 
    display:block; 
}

這是一個同樣的事情，但內容滑動到位的小提琴。我補充說這是因爲SiKni8問爲什麼它沒有滑動。

http://jsfiddle.net/mAzsL/15/

從本質上講，我感動了所有的內容到一個容器中，懸停添加過渡。非常簡單的變化。

來源

2013-09-29 04:48:46 Jacques

謝謝@jack這完全符合我的要求 –

它怎麼不滑動？ – Si8

@ SiKni8因爲OP沒有要求。我會爲你補充一點，因爲我認爲你需要它。 – Jacques

像

<div class="container"> 
    <img src="http://placehold.it/150X200/fff000" /> 
    <div class="inner"> 
     somecontent goes here 
     <div class="overlay">sho on hover</div> 
    </div> 
</div>

和

.container { 
    position: relative; 
    display: inline-block; 
} 
.container .inner { 
    position: absolute; 
    bottom: 0; 
    opacity: .85; 
} 
.container .inner .overlay { 
    display: none; 
} 
.container:hover .inner .overlay { 
    display: block; 
}

演示：Fiddle

來源

2013-09-29 04:51:56

使用css將一個div懸停在其他一些不透明的div上

回答

相關問題