懸停時爲圖片添加標題

我正在使用jQuery caroufredsel，並且我想爲我的項目添加標題。
我知道這可以用this solution解決，但我使用這種方式和我沒有任何li：懸停時爲圖片添加標題

<div id="foo2"> 
    <img src="Images\01.jpg" width="150"/> 
    <img src="Images\02.jpg" width="150" /> 
    <img src="Images\03.jpg" width="150" /> 
    <img src="Images\04.jpg" width="150" /> 
    <img src="Images\05.jpg" width="150" /> 
    <img src="Images\06.jpg" width="150" /> 
    <img src="Images\07.jpg" width="150" /> 
</div>

我怎麼能顯示我的圖片標題懸停時，與一些代碼的效果？

來源

2013-06-04 Sirwan Afifi

*旁註：*您在使用反斜槓，你應該使用'/'（斜槓） – Raptor

我們可以有你的jQuery插件的細節？ – Raptor

當然，我正在使用這個jquery插件：www.caroufredsel.dev7studios.com/ –

在你的HTML代碼試試這個：

<div id="foo2"> 
    <img src="Images\01.jpg" width="150" /><span>image 1</span> 
    <img src="Images\02.jpg" width="150" /><span>image 2</span> 
    <img src="Images\03.jpg" width="150" /><span>image 3</span> 
    <img src="Images\04.jpg" width="150" /><span>image 4</span> 
    <img src="Images\05.jpg" width="150" /><span>image 5</span> 
    <img src="Images\06.jpg" width="150" /><span>image 6</span> 
    <img src="Images\07.jpg" width="150" /><span>image 7</span> 
</div>

，並在你的CSS：

#foo2 img { 
    padding-bottom:15px; 
} 
#foo2 span { 
    width:150px; 
    text-align:center; 
    display:inline-block; 
    margin-left:-150px; 
}

這是我的工作小提琴http://jsfiddle.net/ponrajpaul/quAqS/

顯示在鼠標懸停標題

SCRIPT

$(document).ready(function(){  
    $("#foo2 img").hover(function() {  
    $(this).next().css({"display" : "inline-block"}); 
    },function() {  
    $(this).next().css({"display" : "none"}); 
    }); 
});

和更新CSS上跨度

#foo2 span { 
    width:150px; 
    text-align:center; 
    display:none; 
    margin-left:-150px; 
}

變化顯示值檢查我的新更新的小提琴http://jsfiddle.net/ponrajpaul/quAqS/1/

已更新2017年9月8日

同樣可以通過純CSS實現，沒有Javascript。由於@Elise詠

#foo2 span{ 
    display: none; 
} 
#foo2 img:hover + span{ 
    display: inline-block; 
}

具有良好的瀏覽器的支持以及https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

更新小提琴http://jsfiddle.net/ponrajpaul/quAqS/20/

來源

2013-06-04 06:36:14 PonrajPaul

感謝我的朋友，我已經更新了我的問題， –

現在如何在鼠標懸停時顯示此標題，首先我要將其隱藏起來。 –

*旁註：* IE7對'display：inline-block;'有bug。請參閱：https://developer.mozilla.org/en-US/docs/Web/CSS/display – Raptor

顯示與CSS懸停您的字幕。

span { 
    display: none; 
} 

#foo2:hover + span { 
    display: inline-block; 
}

來源

2014-02-12 01:43:35

懸停時爲圖片添加標題

回答

相關問題