徘徊跨度下的圖像

顯示所以我有「東西」的人的名單可以約每一個這樣顯示的信息獲得。徘徊跨度下的圖像

< --div 1 a.img - > < --div 2 a.img - > < --div 3 a.img - >

< --div 4 a.img- - > < --div 5 a.img - > < --div 6 a.img - >

當我將鼠標懸停在div 1中的a.img上時，顯示的跨度是在div 4的img下。

這是CSS，我有

a { 
    cursor: default; 
    position: relative; 
    text-decoration: none; 
    z-index: 1; 
} 

a:hover span { 
    display:block; 
    position:absolute; 
    background:#ffffff; 
    border:1px solid #cccccc; 
    color:#6c6c6c; 
    max-width: 210px; 
    padding:5px; 
    z-index:2; 
}

任何幫助將是巨大的，感謝

來源

2013-06-21 OneEightLeft

我不知道你在問什麼 – Alex

你是什麼意思？你能給一些適當的Html代碼嗎？ –

圖像應該顯示在哪裏？請把它放在小提琴裏，讓人們可以測試它。 http://www.jsfiddle.net – Huangism

你應該給display: block到a標籤。

來源

2013-06-21 14:59:58

沒有一些html代碼，很難確定，但我猜想源代碼中有一些未封閉的標籤。但是，如果我理解正確的話，你有一些箱子（在你的情況下圖像），和你有一些字幕/文本要在盒子的底部顯示當用戶在他們的移動鼠標。

下面我將展示如何使用CSS來獲得這種效果。我將使用我作爲盒子浮動的div。基本的html和css如下所示：

<html> 
<head> 
<style type="text/css"> 
.box { 
    float: left; 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
    margin: 10px; 
} 
.box h2 { text-align: center; } 
</style> 
</head> 
<body> 
    <div class="box"><h2>Div 1</h2></div> 
    <div class="box"><h2>Div 2</h2></div> 
    <div class="box"><h2>Div 3</h2></div> 
    <div class="box"><h2>Div 4</h2></div> 
</body> 
</html>

這將顯示四個帶有標題的黃色框。對於標籤，我們在每一個div的末尾添加一個簡單的<span>，如下所示：

<div class="box"><h2>Div 1</h2><span>div 1 hover</span></div>

然後我們加入下面的CSS，使他們唯一可見的，當用戶在框上移動鼠標：

.box span { 
    display: none; 
} 

.box:hover span { 
    display: inline; 
}

現在的基本作用是存在的。接下來是讓懸停文本正確定位。這樣做，我們使用相對於框的span的絕對定位。要做到這一點，我們首先添加position:relative到規則.box { /* ... */ }。現在我們添加position:absolute到.box:hover span { /*...*/ }。由於該框具有相對位置，所以絕對定位的span的位置將相對於框。

現在我們可以使用屬性top，bottom，left定位span，right如下：

.box span { 
    display: none; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    text-align: center; 
}

這將會把span元素的底部在盒子的底部，並調整其大小等等它從左到右。文本本身以水平居中爲中心。如果您現在將鼠標移動到任何方框上，則文本將顯示在每個方框的底部。

爲了完整起見，這裏是完整的例子：

<html> 
<head> 
<style type="text/css"> 
    .box { 
     float: left; 
     width: 200px; 
     height: 200px; 
     background-color: yellow; 
     margin: 10px; 
     position: relative; 
    } 

    .box h2 { text-align: center; } 

    .box span { 
     display: none; 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     text-align: center; 
    } 

    .box:hover span { 
     display: inline; 
    } 
</style> 
</head> 
<body> 
    <div class="box"><h2>Div 1</h2><span>div 1 hover</span></div> 
    <div class="box"><h2>Div 2</h2><span>div 2 hover</span></div> 
    <div class="box"><h2>Div 3</h2><span>div 3 hover</span></div> 
    <div class="box"><h2>Div 4</h2><span>div 4 hover</span></div> 
</body> 
</html>

來源

2013-06-21 16:52:04 TAS

徘徊跨度下的圖像

回答

相關問題