當鼠標懸停時，在圖像下方顯示一個框也會移動項目右側的元素

我的目標：我想創建一個水平圖像列表。當鼠標懸停在圖片上時，說明會出現在懸停圖片下方（在具有相同寬度但取決於文字的高度的框中）。每個說明取決於圖像當鼠標懸停時，在圖像下方顯示一個框也會移動項目右側的元素

問題：如果連接的解決方案出現，說明會出現，但它也會移動其右側的圖像。

這裏是代碼。

HTML

<ul id="list-icons"> 
    <li> 
     <img src="" class="icon" /> 
     <p class="popup">Test</p> 
    </li> 
     <li> 
     <img src="" class="icon" /> 
     <p class="popup">Test2</p> 

    </li> 
</ul>

jQuery的

<script> 
$(".icon").hover(
    function() { 
    $(this).next(".popup").slideToggle(); 
    }); 
</script>

CSS

#list-icons li 
{ 
    display:inline-block; 
} 

.icon { 
border: 1px solid #aaa; 
width:100px; 
height:100px; 
} 
.popup{ 
display:none; 
width:100px; 
}

哪裏是我的錯？

來源

2012-04-02 EsseTi

包括如下的CSS，

新增width: 100px到li而不是將其添加到p標籤。 img標籤上的width: 100px將不會應用。
添加vertical-align: top使圖像保持最前面時，描述如下所示。

CSS：

#list-icons li 
{ 
    display:inline-block; 
    vertical-align: top; 
    width:100px; 
} 
.icon { 
    border: 1px solid #aaa; 
    height:100px; 
} 
.popup{ 
    display:none; 
    width:100px; 
}

DEMO

來源

2012-04-02 20:09:45

不只是複製我的答案...我意識到你引用了我，但你不應該這樣做... – Neal 2012-04-02 20:23:16

@Neal實際上添加其他CSS樣式+'：hover'和'：hover'最初發布在您的答案中，這就是爲什麼我添加了您的帖子。可能DEMO代碼有完整的CSS ..不想複製它..謝謝你，我想我應該更新它發佈我的東西。 – 2012-04-02 20:26:44

這似乎工作。 – EsseTi 2012-04-03 07:49:22

沒有JavaScript的嘗試都：

添加到您的CSS：

#list-icons li:hover .popup 
{ 
    display:block; 
}

小提琴：http://jsfiddle.net/maniator/E5zJM/

來源

2012-04-02 20:05:45 Neal

這有同樣的問題，因爲我的。我想將圖像粘貼在他們的地方，並在他們的下面彈出文字 – EsseTi 2012-04-03 07:46:30

當鼠標懸停時，在圖像下方顯示一個框也會移動項目右側的元素

回答

相關問題