Fatal编程技术网
  • html/
  • Html 即使我'；我使用溢出：隐藏

Html 即使我'；我使用溢出：隐藏

html css

Html 即使我'；我使用溢出：隐藏,html,css,overflow,Html,Css,Overflow,我正在尝试创建一个包含不同图像及其说明的标题。我希望在使用jQuery将鼠标移到内容上时显示它们的描述。我只是发布我的HTML和CSS，因为我认为这就是问题所在 jQuery可以工作，但问题是即使在使用了overflow-hidden之后，类headerCont的div也会转到下一行。有人能帮我吗。谢谢 我不允许发布图片，因此这是指向图片的链接，可以帮助您理解我-> PS在上图中，我已经将鼠标移到了一个有班长的div上。我希望文本放在图像旁边。另外，当一个div被展开时（不知道正确的词来解释

我正在尝试创建一个包含不同图像及其说明的标题。我希望在使用jQuery将鼠标移到内容上时显示它们的描述。我只是发布我的HTML和CSS，因为我认为这就是问题所在

jQuery可以工作，但问题是即使在使用了overflow-hidden之后，类headerCont的div也会转到下一行。有人能帮我吗。谢谢

我不允许发布图片，因此这是指向图片的链接，可以帮助您理解我->

PS在上图中，我已经将鼠标移到了一个有班长的div上。我希望文本放在图像旁边。另外，当一个div被展开时（不知道正确的词来解释它！），最后一个div将换行到下一行，而不是原来的位置

HTML代码：

<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>
JavaScript:

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

$(".headerCont").mouseout(function(){
  $(this).animate({ 
width: 214,
  }, 200 );
});
最后我找到了解决办法。谢谢大家。我所做的只是在标题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>


描述
描述
描述
描述
描述
描述
描述
我强烈建议您发布home.js代码，因为我对您的网站正在做什么和/或您正试图完成什么还有些困惑。你发布的图片也给出了一个403禁止的错误。我发布了我的javascript和另一个图片链接。我希望这次它能工作。图像是403-禁止复制，然后粘贴到URL中。不知道为什么，但这对我来说很有效。我甚至还发布了imageshack的另一个链接，这应该有助于进一步澄清，所以当您将鼠标移到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>