Reputation: 33
i am new to JS and need some help please!
I have 2 Boxes(divs) that have a slider in each one. When I mouse over anyone of them, both sliders are activated.
How would i make it so each div is activated separately.
here are my pictures of what I am doing, might make it a little more clear:
pic.twitter.com/1ju3iZ0KIM - before mouse over pic.twitter.com/gmfhl1zl2J - with mouse over
Thanks so much!
This is my JS
<script type="text/javascript">
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 170
}, 200)
})
});
</script>
my divs
<div class="squareFeedBox">
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
</div>
<div class="squareFeedBox">
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
</div>
My css
/Content Boxes/
.squareFeedBox
{
background-color: #fff;
width: 278.5px;
height: 207px;
margin-right: 16px;
margin-bottom: 16px;
float: left;
border-radius: 3px;
box-shadow: 2px 2px 5px #0f2134;
overflow: hidden;
}
/*upSlider*/
.up-down
{
overflow:hidden;
height: 207px;
width: 278.5px;
}
.slide
{
width:278.5px;
height:207px;
}
.default
{
background-color:#fff;
height: 170px;
width: 278.5px;
}
.onhover
{
background-color:#1DB7CB;
height: 207px;
width: 278.5px;
}
Upvotes: 0
Views: 30
Reputation: 78780
$(document).ready(function(){
$('.up-down').mouseover(function(){
$(this).find('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$(this).find('.default').stop().animate({
height: 170
}, 200)
})
});
Using $(this).find
will find the specific .default
which is contained within the current element, rather than every .default
.
Upvotes: 2