鼠標懸停時突出顯示圖像的某些部分

Question

我想創建一個基本上有5人的黑白照片的頁面。現在，將鼠標懸停在每個人身上，我希望該人點亮並在旁邊顯示信息對話框。

任何人都可以請告訴我如何去做這個？

在此先感謝。 :)

Answer 1

可以使用image map或在每個人的頂部製作「隱形」隔間。都有他們的專業和缺點，但圖像地圖是專門爲您所需要的。

要「點亮它們」，您唯一的選擇就是用透明背景覆蓋.png圖像（位於隱形div的懸停位置），但剪輯爲「輕」

Answer 2

兩種可能的方法：

1. CSS精靈

   • 創建包含原始圖像加上在每個不同了懸停狀態下的圖像一個大圖像（親可以垂直堆疊）。

   • 將圖像放置爲DIV大小的背景圖像，以顯示原始圖像（或圖或任何其他圖像）。

   • 將DIV中的某些鏈接放置到您想要的位置（確保您的容器DIV相對定位）。

   • 懸停其中一個鏈接時，請調整圖像的背景位置以顯示正確的圖像並顯示包含您文本對話框的隱藏DIV/SPAN/WHATEVER。

2. Javascript。

   • 與上面相同的方法，但使用懸停/鼠標或任何其他調用的單獨圖像，然後再次調用隱藏對話框顯示。大量的工具提示插件可用於此目的。

Answer 3

HTML：

<a href="#" class="highlightit"><img border="0" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"> 
    <span> something </span> 
</a> 

CSS：

.highlightit img{ 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
    -moz-opacity: 0.5; 
    opacity: 0.5; 
} 

.highlightit:hover img{ 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
    -moz-opacity: 1; 
    opacity: 1; 
} 

.highlightit:hover span{ 
    display:block; 
} 


.highlightit span{ 
    font-size:20px; 
    color:white; 
    background:black; 
    text-decoration:none; 
    display:none; 
    width:100%; 
    padding:10px; 
    position:relative; 
    margin-top:-20px; 
} 

檢查這個搗鼓預覽http://jsfiddle.net/wandarkaf/cNC5G/。