0

当您将鼠标悬停在框上时，我正在尝试使背景淡入。

Box1 是我鼠标悬停的盒子，hover1 是进来的新背景。这实际上工作得很好。但是，它会加载 acript，这意味着，如果我将鼠标悬停在盒子上而发疯，即使我的鼠标静止不动，褪色也会无休止地继续下去。我需要添加某种停止功能。内容是当我将鼠标悬停在内容框中时会更改的文本。这工作正常。

$("#box1").mouseover(function(){
    $("#background").switchClass("nohover", "hover1", 500);
    $("#content").html(box1);

});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
    $("#content").html(content);

});

我也尝试过使用 var，但我仍然遇到同样的问题。如果我将鼠标快速悬停，则褪色会继续运行。

    var goeft = 0;
$("#box1").mouseover(function(){
 if(goeft == 0) {
   $("#background").switchClass("nohover", "hover1", 500);
  $("#content").html(box1);
   goeft = 1;
 }
});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
   $("#content").html(content);

   goeft = 0;
});

CSS代码-v-

      /* CSS Document */
       body
      {
      background-color:#B1EB78;
      }

     #wrapper
     {
     border:5px white solid;
     border-radius:15px;
     background-image:url(../images/mill.jpg);
     }

     #header
     {
     height:120px;
     background-image:url(../images/logo.png);
     background-repeat:no-repeat;
     }

     #content
     {
     height:250px;
     background-image:url(../images/trans_white.png);
     border:1px black solid;
     border-radius:5px;
     }

     #space
     {
     height:40px;
     }

     #space2
     {
     height: 10px;
     }

     #box1
     {
     height:250px;
     background-image:url(../images/trans_green.png);
     }




     #background
     {
     width:100%;
     height:100%;
     border-radius:9px;
     }


    .hover1
    {
    background-color:red;

    }

   .nohover
   {

   }
4

1 回答 1

2 
 var goeft = 0;
$("#box1").mouseenter(function(){
 if(goeft == 0) {
   $("#background").switchClass("nohover", "hover1", 500);
  $("#content").html(box1);
   goeft = 1;
 }
});

$("#box1").mouseleave(function(){
    $("#background").switchClass("hover1", "nohover", 150);
   $("#content").html(content);

   goeft = 0;
});

我不知道这些类，但我认为 mouseenter 和 mouseleave 是 mouseout 和 mouseover 的更好选择

于 2012-05-10T13:15:27.087 回答