PDA

View Full Version : jQuery gallery (selecting elements)



whatg
01-30-2011, 12:48 PM
Hi,

I'm new to jQuery and I've set up a very basic image gallery. When the mouse is hovered over an image the description should disappear but at the moment when the mouse is hovered over any image all the descriptions for all the images are hidden.

Is there any way to just apply the effect to one instance of the class rather than all of them at the same time? :confused:

Thanks in advance. :thumbsup:





<html>
<head>

<link rel='stylesheet' type='text/css' href='gallery7.css'/>

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>

$().ready(function(){

$(".images").hover(function(event){

$(".description").hide("slow",function(){ // Hides element i.e. it dissapears!!

});

});


});


</script>



<title>Basic Gallery</title>

</head>


<body>


<div class='images'>

<img src='images/cow.jpg'/>

<div class='description'>

This is a picture of a cow

</div>
</div>


<div class='images'>

<img src='images/indiana.jpg'/>

<div class='description'>

This is a picture of Indiana Jones

</div>

</div>



<div class='images'>

<img src='images/trek.jpg'/>

<div class='description'>

This is a picture of Enterprise

</div>


</div>

</body>


</html>









.images{
float: left;

}

.description {

position: relative;
top:-18px;
color: blue;
text-align: center;
background-color: gray;
opacity: 0.6;



}

devnull69
01-30-2011, 05:31 PM
$(document).ready(function(){
$(".images").hover(function(event){
$(this).find(".description").hide("slow",function(){ // Will only hide the description inside the div "images"
});
});
});