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 に答える