我的问题是我将鼠标移开并且图像向上滑动，当我将鼠标滑回时向下滑动。但由于我有很多图像和内容框，所以每当我将鼠标悬停在任何方框上时，所有其他内容框也会随之滑动。这有什么问题请帮助我。
我的Jquery在脚本文件中引用：
$("ul.contentnav li a").stop().mouseover(function(e){
$(this).siblings().slideDown("slow");
})
$("ul.contentnav li a").stop().mouseout(function(e){
var description = $(this).next($(".description"));
var descriptionImg = $(this).next($(".descriptionImg"));
$(this).siblings().slideUp("slow");
//description.slideUp("slow");
//$(this).siblings().slideUp("slow");
})
这是我的HTML：
<div class="content">
<ul class="contentnav">
<li><a href="#content_aboutPearl"><img src="images/afd.jpg" width="222" height="161" /></a>
<div class='description'><p class='description_content'>ABOUT FASHION DESIGN</p></div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#content_fashiondesign"><img src="images/pearl02.jpg" width="222" height="161" /></a>
<div class='description'><p class='description_content'>FASHION DESIGN</p></div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd3.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>ADMISSION PROCEDURE </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd4.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>COURSE OVERVIEW </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/dp.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>DOWNLOAD <br />
PROSPECTUS </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd6.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>EVENTS/BLOGS </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/daf.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>DOWNLOAD <br />
APPLICATION FORM </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd8.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>STUDENTS PORTFOLIO </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd9.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>FACULTY </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
</ul>
<!-- end .content --></div>
这是我的CSS：
ul.contentnav {
list-style: none; /* this removes the list marker */
}
ul.contentnav li {
position:relative;
float:left;
margin-right:2px;
margin-bottom:2px;
width: 222px;
height: 161px;
}
ul.contentnav li:nth-child(3){
margin-right:0px;
}
ul.contentnav li:nth-child(6){
margin-right:0px;
}
ul.contentnav li:nth-child(9){
margin-right:0px;
}
ul.contentnav a, ul.contentnav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
/*padding: 5px 5px 5px 15px;*/
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 220px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
text-align:center;
background-color: #e02f1d;
height: 161px;
position:relative;
}
ul.contentnav a:hover, ul.contentnav a:active, ul.contentnav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
width:220px;
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
opacity:0.6; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
display:none;
/*display:block;*/
}
p.description_content{
padding:10px;
margin:0px;
font-size:13px;
}
div.descriptionImg{
position:absolute; /* absolute position (so we can position it where we want)*/
top:50px; /* position will be on bottom */
left:90px;
display:none;
}
答案 0 :(得分：0)
我不知道你想要什么。但尝试这可能有帮助
$("ul.contentnav li a").hover(function(){
$(this).siblings().slideDown("slow");
},function(){
var description = $(this).next($(".description"));
var descriptionImg = $(this).next($(".descriptionImg"));
$(this).siblings().slideUp("slow");
});
答案 1 :(得分：0)
“每当我将鼠标悬停在任何方框上时，所有其他内容框也会滑动”
如果我理解正确，问题在于，为了将鼠标移动到特定的盒子，你无法将其移动到一个或多个其他盒子上，并且所有其他盒子也会发生悬停效果。
如果是这样，你可以引入一个超时，这样就不会发生悬停，除非鼠标已经进入框中至少500毫秒（或任何适合你的时间 - 实验）。如果鼠标移出一个盒子，那么在它运行之前取消超时：
var timerId;
$("ul.contentnav li a").mouseover(function(e){
var a = this;
//clearTimeout(timerId);
timerId = setTimeout(function() {
$(a).siblings().slideDown("slow");
}, 500);
}).mouseout(function(e){
clearTimeout(timerId);
var description = $(this).siblings(".description");
var descriptionImg = $(this).siblings(".descriptionImg");
$(this).siblings().slideUp("slow");
//description.slideUp("slow");
//$(this).siblings().slideUp("slow");
});
（请注意，按照您的方式使用.stop()是没有意义的 - 在分配鼠标事件处理程序之前停止动画一次，此时永远不会停止动画。 ，.next()没有做你认为它做的事情 - 它选择下一个元素当且仅当它与提供的选择器匹配时，它不会继续向下看，直到找到匹配的元素 - 我认为如果您将其更改为使用.siblings("your selector")，您将获得所需的效果。）