0

div（1）をホバーするとdiv（2）ポップアップに問題がありますが、ポップアップdivをホバーすると、彼が消えます。div（2）をスライドするか、div（1）の後にポップアップする必要があります。 。そして、div（1）とdiv（two）は同じクラスに登録します。これが私のCSS、HTML、JavaScriptです。

HTML

 <div id = "one" class="slideUP1"></div>
 <div id = "two" class="slideUP1"></div>

CSS

 .slideUP1

{
      background-color:Gray;
}

#one


{
    z-index:50;
    width:320px;
    height:124px;
    position:relative;
    overflow:hidden;
    float:left;
    margin-right:5px;
    margin-top:0px;
}

#two 
{ 
  display: none; 
  position:absolute;
  height:300px;
  width:900px; 
  z-index:55; 
  margin-bottom:0px;
}

javascript

$(document).ready(function () {

           $(".slideUP1").hover(function () {
               $(this).next("#two").animate({ opacity: "show", top: "144" }, "fast");
           });
       });

       $(document).ready(function () {

           $(".slideUP1").mouseleave(function () {
               $(this).next("#two").animate({ opacity: "hide", top: "154" }, "fast");
           });
       });
4

1 に答える 1

4

問題は、2 番目の div にカーソルを合わせると、最初の div が離れてしまい、閉じてしまうことです。両方をコンテナーに入れて、代わりにホバー イベントを使用します。

<div id = "container">
    <div id = "one" class="slideUP1"></div>
    <div id = "two" class="slideUP1"></div>
</div>

そしてJavaScript：

$(document).ready(function () {

       $("#container").hover(
            function () {
               $(this).find("#two").animate({ opacity: "show", top: "144" }, "fast");
           },
            function () {
               $(this).find("#two").animate({ opacity: "hide", top: "154" }, "fast");
           });
   });
于 2012-10-02T14:08:42.067 に答える