Question

全部，原谅我，我不知道如何用语言表达问题。所以我想更好地了解我的代码以及我想用它做什么。感谢。

说你有这个代码。

<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/

我想要做的是当鼠标在$（“。容器）中移动时，我想在当前的$（”。容器）中显示$（“。head”），但到目前为止。这个div显示和隐藏使布局中断（你可以看到$（“。content”）正在移动.head显示并隐藏。）。这意味着我想要$（“。head”）显示结束和当鼠标进入时，$（“。容器”）请帮助我，谢谢。

Answer 1

您可以像这样更改.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");}
                         );});

Answer 2

live fiddle here

<强> 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")，更多信息{{ 3}}和here。

Answer 3

你必须稍微更改你的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;}

希望这会有所帮助;）

Answer 4

您也可以使用不透明度来显示/隐藏.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代替不透明度。

Div显示当鼠标移入并移出时隐藏

4 个答案: