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

你必须稍微改变你的 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班级

.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

您也可以使用不透明度来显示/隐藏 .head 样式

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

当您使用它时display:none;，display:block;它会删除并添加整个 .head div，这就是布局中断的原因。

查询：

$(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;

}

或者，您可以使用.showand.hide而不是 Opacity。

于 2013-03-25T03:02:20.663 回答