我是JS的新手,需要一些帮助!
我有两个盒子(div(,每个盒子里都有一个滑块。当我将鼠标悬停在其中任何一个滑块上时,两个滑块都会被激活。
如何使每个div分别被激活。
以下是我正在做的事情的照片,可能会让它更清晰一点:
pic.twitter.com/1ju3iZ0KIM-鼠标悬停之前pic.twitter.com/gmfhl1zl2J-鼠标悬停在上
非常感谢!
这是我的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>
我的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>
我的css
/内容框/
.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;
}
$(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)
})
});
使用$(this).find
将找到包含在当前元素中的特定.default
,而不是每个.default
。