我是Jquery的新手,虽然Jquery有许多图片标题插件,但我想创建自己的插件以便学习。
然而我遇到的问题是,当我将鼠标悬停在一张图片上时,图片标题会出现在我页面上的所有图片上。也许这很简单,但我是新手,请帮助。
我写的我的Jquery是:
$(document).ready(function(){
$('.caption').hide();
$('.qitem').hover(function() {
$('.caption').animate(
{opacity: 'show',height: 'show'},
{queue: false, duration: 100 });
}, function() {
$('.caption').stop(true)
.animate({
opacity: 'hide',
height: 'hide'
}, {queue: false, duration: 300 });
});
});
我的HTML是:
<!--
<div class="qitem">
<a class="fancybox fancybox.ajax" href="portfolioclient.html"><img src="tmb.jpg" alt="Test 1" title="" width="180" height="180"/></a>
<span class="caption"><h4>Tester1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a class="fancybox fancybox.ajax" href="fancybox/fancyapps-fancyBox-0ffc358/demo/ajax.txt">Ajax</a></p></span>
</div>
<div class="qitem">
<a class="fancybox fancybox.ajax" href="portfolioclient.html"><img src="2ndimage.jpg" alt="Test 1" title="" width="180" height="180"/></a>
<span class="caption"><h4>Tester</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a class="fancybox fancybox.ajax" href="fancybox/fancyapps-fancyBox-0ffc358/demo/ajax.txt">Ajax</a></p></span>
</div>
-->
我的CSS是:
.qitem {
width:180px;
height:180px;
/* some styling for the item */
border:4px solid #222;
margin: 5px 20px 20px;
/* absolute position enabled for children elements*/
position:relative;
float:left;
/* hand symbol for ie and other browser */
cursor:hand; cursor:pointer;
}
.qitem img {
border:0;
}
/* styling for caption, position absolute is a must to set the z-index */
.qitem .caption {
position:absolute;
color:#ccc;
display:block;
position: absolute;
bottom: 0px;
background: #000;
opacity:0.6;
}
.qitem .caption h4 {
font-size:18px;
padding:5px 15px 0px 15px;
margin:0;
color: #3A97F7;
font-family: Verdana;
letter-spacing: 2px;
}
.qitem .caption p {
font-size:12px;
padding:3px 15px 5px 15px;
margin:0;
font-family:verdana;
}
.qitem a:hover{
font-weight:bold;
color:#00FFCC;
text-decoration:underline;
}
.qitem a{
text-decoration:none;
color:#FFFFFF;
}
答案 0 :(得分:1)
使用$(this).find('.caption')
查找特殊标题:
$(document).ready(function(){
$('.caption').hide();
$('.qitem').hover(function() {
$(this).find('.caption').animate(
{opacity: 'show',height: 'show'},
{queue: false, duration: 100 });
}, function() {
$(this).find('.caption').stop(true)
.animate({
opacity: 'hide',
height: 'hide'
}, {queue: false, duration: 300 });
});
});
答案 1 :(得分:0)
悬停后,使用this
函数获取悬停的对象...
当您在悬停功能中使用('.qitem')
时,您可以再次获得所有内容......
$(document).ready(function(){
$('.caption').hide();
$('.qitem').hover(function() {
$(this).find('.caption').animate(
{opacity: 'show',height: 'show'},
{queue: false, duration: 100 });
}, function() {
$(this).find('.caption').stop(true)
.animate({
opacity: 'hide',
height: 'hide'
}, {queue: false, duration: 300 });
});
});