Question

当你将鼠标放在一个盒子上时，我正试图让背景淡入淡出。

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
   {

   }

Answer 1

 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的更好选择

Jquery - 背景淡入淡出。

1 个答案: