鼠標懸停上的其他圖像

我正在開發一個系統，每個用戶都可以發送個人消息給系統的其他用戶。他可以一次發送相同的消息給任意數量的用戶。當他選擇多個用戶作爲目標時，他們的個人資料照片顯示在下方。鼠標懸停上的其他圖像

我需要的是，每當用戶將鼠標懸停在這些圖片之一上時，我想要在圖片的右上角出現一個小十字標記，並且當用戶單擊該十字標記時，用戶應該從目標列表中刪除（或任何其他操作 - 無關緊要）。

我該如何做到這一點？實質上，我需要在個人資料圖片（右上角）上方顯示另一張圖片，併爲此提供onclick事件。這怎麼能實現？我不想使用絕對定位。

2011-06-08 sasidhar

我建議你想辦法來實現你的腳本，嘗試一下，拉一些頭髮出來，_then_來發布非這裏的工作代碼有一個明確的，簡短的點問題。 – stefgosselin 2011-06-08 17:50:31

以及我無法理解如何通過其他想法來處理這一個圖像......我如何得到沒有絕對定位和z-index的圖像？ – sasidhar 2011-06-08 17:52:27

'「我不想使用絕對定位」 - 爲什麼？這是該工作的完美工具。 – thirtydot 2011-06-08 17:54:53

@thirtydot我不想使用絕對定位，因爲我有很多這樣的照片，我可以在使用絕對定位的網站上許多不同的地方讓他們將意味着使用 JavaScript或jQuery來計算當前位置懸空元素並使用該位置指定新圖像的位置等等。我覺得這一切都相當不便。沒有更簡單的方法嗎？

你對現在不想使用絕對定位原因的解釋現在非常有意義。

我會告訴你爲什麼它實際上是「工作的完美工具」。

你是不知道的事實，你可以使用position: relative與position: absolute元素的父，使absolute元素從父，而不是從頁偏移，如下解釋：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

所以，很好地解決了你的問題是這樣的：http://jsfiddle.net/CKJQ3/

而另一個版本以最小的JavaScript：http://jsfiddle.net/CKJQ3/1/

CSS：

.imageContainer { 
    position: relative; 
    border: 1px dashed #444; 
    float: left 
} 
.imageContainer img { 
    display: block 
} 
.imageContainer .closeButton { 
    position: absolute; 
    top: -5px; 
    right: -5px; 
    display: none 
} 
.imageContainer:hover .closeButton { 
    display: block 
}

HTML：

<div class="imageContainer"> 
    <img src="http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG" /> 
    <a href="#" class="closeButton"><img src="http://dummyimage.com/16x16/f0f/fff&text=+" /></a> 
</div>

來源

2011-06-08 18:08:19 thirtydot

您可以將配置文件圖像作爲背景放在div上，並將按鈕放在圖像頂部。無論如何，你都必須定位按鈕。

來源

2011-06-08 17:48:53 JohnathanKong

把每個資料圖片在一個div的位置是：相對的，然後顯示與位置嵌套的div：絕對的（這是相對於包含分區，這樣你就不會需要計算在運行時的位置）

來源

2011-06-08 18:00:46 roberkules

但我們如何讓這些圖像相互重疊？ – sasidhar 2011-06-08 18:09:12

對不起，我無法提供一個jsfiddle演示，但我在一個商場:-)無論如何，這是解決方案。 – roberkules 2011-06-08 18:37:21

感謝大家.......得到了它...... – sasidhar 2011-06-08 18:57:29

也許這將有助於爲出發點：http://jsfiddle.net/JevbE/

來源

2011-06-08 18:07:13 Andy

+1爲類似和可行的解決方案。 – thirtydot 2011-06-08 18:31:15

您可以化身triiger「x」的定位在頭像和設置opaicy 0.01

$(document).ready(function(){ // This sets the opacity of the x to fade down to 01% when the page loads 
    $(".x").fadeTo(1, 0.01); 

$(".avatar").hover(function(){ 
    $(".x").fadeTo("slow", 1.0); // This sets the opacity of x to 100% on hover 
} 


,function(){ 
    $(".avatar").fadeTo("slow", 0.01); // This sets the opacity back to 01% on mouseout 
}); 




});

只需設置頭像類visability。頭像和'X'元素類.x

希望它有幫助。

來源

2011-06-08 18:07:35 Piotr

鼠標懸停上的其他圖像

回答

相關問題