{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 放我归山 的问题《jquery fade in fade out on hover for multiple elem》','https://www.manongdao.com/q-875524.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am working on a portfolio page and would like to use jquery to fade in some information over the image when the user hovers over the item.
I am quite new to back-end jquery stuff so just starting to get my hands dirty.
I have managed to get the fade in and out to work on a singular div element, but I need it to work independently for each one. I assume this requires some kind more dynamic code, but I'm not sure where to start.
If you look below I have the code which works for one item. The div appears when you hover over the first image. This is the structure I need as the real portfolio has this basic structure. I just need the code to get it working for the other two. There will be multiple hover overs in the live site.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
#box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
#boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover(over, out);
});
function over(event)
{
$('#boxover').fadeIn(2000);
$('#boxover').css("display","normal");
}
function out(event)
{
$('#boxover').fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">hello</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">there</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">rob</div></a>
</body>
</html>
If someone could show me how to make each one work independently that would be great.
I'm guessing a rel attribute like lightbox?
I'm happy to give each image a separate id/rel. I just don't want to replicate the css.
Hope that makes sense :)
OK, so I have updated it but it still doesn't work. I can see what is going on, but not sure the exact syntax to get it working.
Here is my new code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
.boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('.box').hover(over, out);
});
function over(event){
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function out(event) {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>
</body>
</html>
I think I'm nearly there as the pseudo logic makes sense, but it's still not working.
Cheers
Rob
Depending on the browsers you're targeting, you don't need jQuery at all. If you have to target IE and can't suffer the immediate change instead of transitioning, you could conditionally comment a reference to a Javascript for it like the other posters have mentioned.
You could do:
fiddle here http://jsfiddle.net/rynma/
Basically you must use
classesinstead ofidsbecause id must be unique and you pass acontextto the jquery selector to restrict the selection to the context (i usethis)First: Don't use the same
idfor all of youras anddivs. An id is a unique identifier of an element, for "groups" of elements there is theclassattribute.To get the corresponding box to show/hide, use the advanced selectors of jquery, trying to get the one box which is directly before the hovered element.
Here you go: http://jsfiddle.net/Mm66A/13/
Please don't use ID fields for naming things "box,box,box", use the Class of 'box' to say that each item is of type 'box'. You can give each box a UNIQUE id.
i would give each a tag a unique id, and give the over box an id of 'over_' + id_of_box_link and change id=box to class=box then you can apply the hover by doing this:
you cannot have duplicate IDs.
You can't have more than one element with the same
idin valid html. Change eachidtoclassand change your jquery selectors from$('#box')and$('#boxover')to$('.box')and$('.boxover')and this should work for you...