0

すべて、許してください私は質問を言葉で表現する方法がわかりません。だから私は自分のコードとそれを使って何をしたいのかについて背を向けたほうがいいと思います。ありがとう。

このコードがあるとしましょう。

<div class="father">
<div id ="container1" class="container">
    <div class="head">

    </div>
    <div class="content">
    </div>
</div>
<div id ="container2" class="container">
    <div class="head">

    </div>
    <div class="content">
    </div>
</div>
</div>

.father
{
    min-height:300px;
    border:1px solid black;

}
#container1
{
    float:left;
    border:1px solid red;
    width:48%;
    min-height:200px;
}
#container2
{
    float:left;
    border:1px solid blue;
    width:48%;
    min-height:200px;
}
.head
{
     height:20px;
     border:1px solid purple;

}
.content
{
    height:40px;
    border:1px solid green;


}
$(function(){
    $(".head").css("display","none");
    $(".container").hover(function(){$(".head",this).css("display","block");},function(){$(".head",this).css("display","none");});

})

http://jsfiddle.net/malaikuangren/LuPhd/

私がやろうとしているのは、マウスが$（ "。container）内を移動するときに、現在の$（"。container）内の$（ "。head"）を表示したいのですが、これまでのところ。このdivの表示と非表示により、レイアウトが壊れます（.headの表示と非表示のときに$（ "。content"）が移動していることがわかります）。つまり、$（ "。head"）を何度も表示したいということです。マウスを入れるときの$（ "。container）。助けてください、ありがとう。

4

4 に答える 4

0

.headこのようにクラスを変更できます

.head
{
     height:20px;
     border:1px solid purple;
     position: absolute;    

}

そしてこのようなあなたのJavaScriptコード

$(function(){
     $(".head").css("display","none");
    $(".container").hover(function(){$(".head",this).css("display","block");
         $(".head",this).width($(this).width());},
                          function(){$(".head",this).css("display","none");}
                         );});
于 2013-03-25T02:31:51.793 に答える
0

ここにライブフィドル

HTML

<div class="father">
<div id ="container1" class="container">
     <div class="head">
    </div>
    <div class="content">
    </div>
</div>
<div id ="container2" class="container">
    <div class="head">

    </div>
    <div class="content">
    </div>
</div>
</div>

CSS

.father
{
    min-height:300px;
    border:1px solid black;

}
.container
{
    width:48%;
    min-height:200px;
}
#container1
{
    float:left;
    border:1px solid red;
}
#container2
{
    float:left;
    border:1px solid blue;
}
.head
{
    height:20px;
    border:1px dotted purple;
    z-index:9999;
    position:absolute;
    display:none;
}
.content
{
    height:40px;
    border:1px solid green;
}

jQuery

$(function(){
    $(".head").width($('.container').width());
    $(".container").hover(function(){$(".head", this).show()},function(){$(".head",this).hide();});  
});

こことここで詳細情報を使用するのshow()ではなく.css("display","block")、hide()代わりに使用する必要があります。.css("display","none")

于 2013-03-25T02:36:02.973 に答える
0

CSSとjQueryコードを少し変更する必要があります...

jQuery：

// get the width of the container
    var box_width = $(this).css("width");
    $(".head",this).css("width",""+box_width+"");

CSS：

.head{
 height:20px;
 border:1px solid purple;
position:absolute;}

これがお役に立てば幸いです;）

于 2013-03-25T02:45:03.670 に答える
0

不透明度を使用して、.headスタイルを表示/非表示にすることもできます

例：http://jsfiddle.net/LuPhd/13/

を使用するdisplay:none;とdisplay:block;、.head div全体が削除および追加されるため、レイアウトが壊れます。

JQuery：

$(function(){
    $(".container").hover(function()    
      {$(".head",this).css("opacity","1");},function()
      {$(".head",this).css("opacity","0");});                      
})

CSS：

.head
{
     opacity:0;
     height:20px;
     border:1px solid purple;

}

または、不透明度の代わりに.showとを使用することもできます。.hide

于 2013-03-25T03:02:20.663 に答える