使用CSS的圖像定位。（一個小的jQuery參與）

在這裏有一些CSS問題。首先，我的HTML代碼：使用CSS的圖像定位。（一個小的jQuery參與）

<p> 
<span id="tripTitle">Created Trips</span>&nbsp; 
<span class="expandicon" style="display:none;"><span class="flip"><img class="expand" src="http://i228.photobucket.com/albums/ee190/micmofo/expand1.png" /></span></span> 
<span class="shrinkicon"><span class="flip"><img class="shrink" src="http://i228.photobucket.com/albums/ee190/micmofo/shrink1.png" /></span></span> 
</p>

我的jQuery代碼切換圖像。

$(function(){ 
    $('span.expandicon').click(function(){ 
     $(this).toggle().next('span.shrinkicon').toggle();  
    }); 
    $('span.shrinkicon').click(function(){ 
     $(this).toggle().prev('span.expandicon').toggle();   
    }); 
})

最後，我的CSS：

.expand, .shrink { 
    position: absolute; 
    right:1px; 
}

我想要的圖像轉到頁的最右側，但使用當前的CSS我有，「縮水」圖標，住宿等等「展開」圖標根本看不到。我相當新的CSS，所以我知道的是通過刪除樣式，它實際上工作。所以很可能，問題在於CSS。

我爲那些願意幫助的人提供了一個jsfiddle。 http://jsfiddle.net/vfpM5/

謝謝，夥計們。

來源

2011-10-28 Mike Sanchez

這可能是一個愚蠢的評論，但當我看着你的鏈接，並從JSFiddle上的「結果」跨度下移出圖標時，它似乎正確切換。看到http://jsfiddle.net/CqdRP/ – Eric

更改CSS下面再工作...

.expandicon, .shrinkicon{ 
    position: absolute; 
    right:1px; 
}

還，我說top:50px;的CSS所以這將是被jsfiddle result阻止的事情。

來源

2011-10-28 02:25:21 Quincy

這絕對奏效！怎麼來的？這讓我很頭疼，說實話。謝謝，昆西。 –

其實我也不知道你的解決方案爲什麼不起作用。但是，當我試圖統一元素，它神奇地工作。 – Quincy

我想你想float: right

更新小提琴：http://jsfiddle.net/vfpM5/1/

來源

2011-10-28 02:19:34

嘗試了你的jsfiddle，但點擊它後並排顯示兩個按鈕。 –

使用CSS的圖像定位。 （一個小的jQuery參與）

回答

相關問題

使用CSS的圖像定位。（一個小的jQuery參與）