在不「推」其他元素的情況下切換圖像的可見性的最佳方式是什麼？

我有一張網頁，裏面有一張表格單元格，我只想在鼠標懸停在單元格上時顯示。在不「推」其他元素的情況下切換圖像的可見性的最佳方式是什麼？

我的問題是，它「推」的其他文本的左側時，顯示的圖像（因爲默認狀態是顯示：無「）。我在找，做

在溶液表格單元格，我有一個形象，是對使用此代碼右上：

<td class="tableCell"> 
     <span class="cellMenu"> 
      <img src="/Icons/arrow_down.png" class="seatMenuArrow"> 
     </span> 
     A bunch of other text that is all center aligned 
</td>

下面是使cellMenu圖像右上角的CSS

.cellMenu 
{ 
    display:none; 
    float:right; 
    cursor: pointer; 
}

，我這樣做。僅當您將鼠標懸停在單元格上時才顯示該樂器。

$('.tableCell').live('hover', function() { 
     $(this).toggleClass("hover").find(".cellMenu").toggle(); 
});

這工作，但在圖像顯示的是「一幫就是對齊所有中心等文字的」移動過。什麼是正確的方法來避免這種移動，所以圖像只顯示，沒有別的動作？

來源

2014-10-10 leora

使用'知名度：hidden'，它仍然會佔用空間，但不會顯示 – 2014-10-10 13:58:57

看這個問題：HTTP：//計算器.com/questions/9614622/jquery-hide-to-set-visibility-hidden- – 2014-10-10 14:03:32

做沒有jQuery的：

.cellMenu img 
    { 
    opacity:0; 
    float:right; 
    cursor: pointer; 
    } 

.cellMenu:hover img 
    { 
    opacity: 1; 
    }

增加了JSfiddle

來源

2014-10-10 14:00:43 Rvervuurt

當我將鼠標懸停在圖像上時，我想顯示的圖像不是當我將鼠標懸停在表格上時。。 – leora 2014-10-10 14:01:18

看看我的編輯。當您將鼠標懸停在'.cellMenu'上時，它會更改存儲在內的'img'的不透明度。 – Rvervuurt 2014-10-10 14:04:04

現在看起來不錯。。感謝您的更新 – leora 2014-10-10 14:08:35

在不「推」其他元素的情況下切換圖像的可見性的最佳方式是什麼？

回答

相關問題