1

我的问题是我鼠标悬停，图像向上滑动，当我离开鼠标时，又向下滑动。但是由于我有很多图像和内容框，所以每当我将鼠标悬停在任何框上时，所有其他内容框也会随之滑动。这是什么问题，请帮助我。

在这里提琴

我的 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;

}
4

2 回答 2

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")你会得到你的效果想。）

演示：http: //jsfiddle.net/qGvDA/3/

于 2012-10-03T07:26:47.323 回答
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"); 
});
于 2012-10-03T07:22:16.903 回答