0
我想將圖像劃分爲不同的部分,以便我可以創建效果,例如,如果我將鼠標懸停在圖像的頂部,則需要進行更改,如果我將鼠標懸停在底部我想一些其他的變化看到這 http://jsfiddle.net/fc3nb5rL/11/將圖像劃分爲不同的部分
在這裏,我通過在圖像的頂部創建兩個div,但有沒有其他方式來做到這一點?
這裏是我的代碼
HTML
<div id="top_part">
<div id="up">UP</div>
</div>
<div id="bottom_part">
<div id="bottom">BOTTOM</div>
</div>
<a href="second"><img src="http://placekitten.com/300/300" class="back"></a>
CSS
.container img {
position:absolute;
width:300px;
height:300px;
}
#top_part{
position:absolute;
width:300px;
height:150px;
background-color:transparent;
}
#bottom_part{
position:absolute;
width:300px;
height:150px;
margin-top:150px;
background-color:transparent;
}
#up{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
visibility:hidden;
}
#bottom{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
margin-top:132px;
visibility:hidden;
}
#bottom_part:hover #bottom{
visibility:visible;
}
#top_part:hover #up{
visibility:visible;
}
看起來很精緻。 Otherway是你可以使用'
@SureshPonnukalai你能告訴我它是如何完成的嗎?我是新的 – Akshay 2014-09-29 12:07:13