Question

我试图创建一个包含不同图像及其描述的标题。我希望当我们使用jQuery mouseOver内容时显示他们的描述。我只发布我的HTML和CSS，因为我认为这就是问题所在。

jQuery有效，但问题是即使在使用溢出后隐藏了div类与headerCont包装到下一行。有人可以帮我弄这个吗。感谢。

我不允许发布图片，因此这是图片的链接，可以帮助您了解我 - ＆gt;

http://image.bayimg.com/cabjpaaeg.jpg

http://img145.imageshack.us/img145/3236/cabjpaaeg.jpg

PS在上面的图片中我已经使用了headerCont类的mouseOver之一。我希望将TEXT放在图像旁边。每当一个div被展开时，最后一个div就会包裹到下一行（不知道正确的单词来解释它！）而不是原来的地方

HTML CODE：

<html>
<head>
    <title>Silder</title>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
    <div class="header">
        <div style="margin: 5px; width:1300px; overflow: hidden;">
        <div class="headerCont" style="background-color: #cdcdcd;  ">
            <div><img src="image/1.jpg" style="height: 317px; width: 214px; float:left; " /></div>
            <div style="float:left;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #719501; ">
            <div><img src="image/2.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #f3f3f3; ">
            <div><img src="image/3.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #719501; ">
            <div><img src="image/4.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:186px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #f3f3f3;">
            <div><img src="image/5.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jQuery.js" ></script>
    <script type="text/javascript" src="js/home.js" ></script>
</body>

CSS代码：

#content{
margin-left: auto;
margin-right: auto;
width: 90%;
border: 2px solid;
border-color: #272727;}
.outter{
border:2px solid #000000;
margin:4px;
position: relative;
}
.header{
width:1300px;
height:400px;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
margin-bottom:20px;
overflow:hidden;
position: relative;
}
.headerCont{
height: 100%; 
width:214px;
padding:5px;  
float:left;
overflow:hidden;
position:relative;
}
.header img{
border-color:#000000;
}

JavaScript的：

$(".headerCont").mouseover(function(){
  $(this).animate({
width:400,
  }, 300 );
});

$(".headerCont").mouseout(function(){
  $(this).animate({ 
width: 214,
  }, 200 );
});

Answer 1

最后我找到了解决方案。谢谢大家。我所做的只是在我的标题div之后添加另一个包装div。代码如下：

<div class="header">
            <div style="width:10000px; height: 317px;">
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            <div class="outter">
                <div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
                <div style="float:left;">Description</div>
            </div>
            </div>
        </div>

即使我正在使用溢出：隐藏包装

1 个答案: