圖片上的文字鼠標懸停 - CSS定位

我正在使用此叉子代碼在圖片的鼠標懸停上顯示文字。圖片上的文字鼠標懸停 - CSS定位

HTML

<img src="http://placekitten.com/150" alt="some text" /> 
<img src="http://placekitten.com/150" alt="more text" /> 
<img src="http://placekitten.com/150" alt="third text" /> 

<div id="text"></div>

CSS

div { 
    display: none; 
    position: absolute; 
} 

img:hover + div { 
    display: block; 
}

JQUERY

$('img').hover(function() { 
    $('div').html($(this).attr('alt')).fadeIn(200); 
}, function() { 
    $('div').html(''); 
});

我找div文本爲d顯示在每個圖像內而不是固定的div。

任何想法？

來源

2013-11-02 Joanna Mikalai

你其實不需要jQuery。使用純CSS可以輕鬆實現。

在此示例中，我使用:after僞元素添加父div的alt屬性的內容。您可以添加任何你想要的造型..

jsFiddle here - 更新包括褪色

HTML - 很簡單

<div alt="..."> 
    <img src="..."/> 
</div>

CSS

div { 
    position: relative; 
    display: inline-block; 
} 

div:after { 
    content: attr(alt); 
    height: 100%; 
    background: rgba(0, 0, 0, .5); 
    border: 10px solid red; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: inline-block; 
    box-sizing: border-box; 
    text-align: center; 
    color: white; 
    padding: 12px; 
    font-size: 20px; 
    opacity: 0; 
    transition: 1s all; 
    -webkit-transition: 1s all; 
    -moz-transition: 1s all; 
} 

div:hover:after { 
    opacity: 1; 
}

來源

2013-11-02 18:32:10

謝謝喬什 - 我喜歡這種方式 - 唯一的缺點是，你沒有一個很好的淡入/淡出效果爲文本..這是我們可以添加到您的解決方案？ –

也是：僞元素與舊版瀏覽器兼容後？ –

@JoannaMikalai當然 - 只需使用CSS轉換並調整不透明度即可。 HTTP：//的jsfiddle。net/2nfgj/ –

更改您的JavaScript對此：

$('img').hover(function() { 
    $('div').html($(this).attr('alt')).fadeIn(200); 
    $('div').css('left',$(this).offset().left + 'px'); 
    $('div').css('top',$(this).offset().top + $(this).height() - 20 + 'px'); 
}, function() { 
    $('div').html(''); 
});

而且這應該有所斬獲。

來源

2013-11-02 18:44:26 Coltech

我會用某種包裝包裝您的圖像，然後使用CSS進行懸停效果（DEMO）。

HTML：

<div class="img-wrapper"> 
    <img src="http://placekitten.com/150" alt="some text 1" /> 
    <div class="img-desc">some text 1</div> 
</div>

CSS：

.img-wrapper { 
    position: relative; 
    display: inline; 
} 

.img-desc { 
    display: none; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    background: #FFF; 
    opacity: 0.6; 
    padding: 5px; 
} 

.img-wrapper:hover .img-desc{ 
    display: block; 
}

我加入額外的CSS過渡到演示的替代解決方案。

爲了得到一個過渡只是控制與opacity能見度：

.img-desc { 
    /*...*/ 
    opacity: 0; 
    /*...*/ 
} 

.img-wrapper:hover .img-desc{ 
    opacity: 0.6; 
    transition: opacity 0.4s ease-in; 
}

來源

2013-11-02 18:47:26

圖片上的文字鼠標懸停 - CSS定位

回答

相關問題