Question

设计我创建了一个根据悬停状态改变背景的div，其中段落略高于其父级，因此当＆＃34;之前＆＃34; ＆＃34;＆＃34;＆＃34;＆＃34;宣布，它看起来干净，无缝。

问题： 我试图让我想要的div在成长和崩溃时徘徊。但是，当我尝试修改段落以使用div调整内部大小时，没有任何反应。我尝试了几个实验，看看哪些有效，但我无法获得理想的效果。 文本在展开时完美无缺，但在没有时会拒绝更改或修改。 换句话说，我的问题不在于悬停，而是文本。它只是不会让我调整大小或强制它在悬停时更改边距或填充大小。我认为前后标签可能与文本重叠，无论我给它们的z-index如何。您可以看到问题和所需影响的图像示例，以及下面的jsfiddle。 （在代码下）

代码：

    .con-1
{
    background:url(con-2.png) no-repeat;
    display:compact;
    margin-top:15px;
    margin-left:50px;
    position:relative;
    width:928px;
    height:140px;
    margin-bottom:10px;
    overflow:hidden;

}



.con-1::before
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:159px;
    background:url(con-1-top-4.png) no-repeat center center;
    left:4px;
    top:-159px;

}

.con-1::after
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:65px;
    top:65px;
    background:url(con-1-bot-4.png) no-repeat;
    margin-bottom:50px;

}

 .con-1:hover
{
    height:100%;
    overflow:visible;
    background:url(con-1-mid-4.png) repeat-y;
    margin-top:170px;
    margin-bottom:100px;
}

 .con-1 p{
    margin-top:-290px;
    position:float;
    padding-left:120px;
    padding-right:250px;
    margin-bottom:-100px;
    z-index:200;
    overflow:visible;
}

此处的图片示例： http://1drv.ms/1sVJKkp

Jsfiddle在这里： http://jsfiddle.net/eradrom/6YNjw/

详细信息： 好吧，我已经为deviantart.com工作了一段日志皮肤项目一段时间了（这个网站只允许编码中的CSS更改，而且允许的命令和代码非常有限）而且我遇到了几个颠簸在路上。除了我描述的小问题之外，我设法让它的大部分工作。我对此我的智慧结束了。希望可以在不必创建另一个div的情况下给出解决方案。

重要提示：如果表单或输入标记甚至是标签，则网站不允许使用，因此也不起作用。我已经尝试过检查过了。

Answer 1

删除overflow: visible;上包含该文字的.con-1 p。这应该在内容未扩展时隐藏内容。使用overflow: visible;时，即使div被“最小化”，您也会显示溢出。＆＃34;

此外，您应该知道position: float;不是有效的HTML。如果您想要浮动某些东西，则该属性本身为float。例如，您可以将其设置为float: left;。有效类型position包括relative，fixed，absolute和static（这是默认设置）。

Answer 2

您是否尝试过使用此w3school示例中的css过渡

http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

我希望这有帮助！

Answer 3

您可以将.con-1 p的边距更改为与.con-1相同的负边距，然后使用选择器.con-1：hover p更改p元素的边距。

<强> CSS

.con-1:hover p {
    margin-top:-290px;
}

 .con-1 p {
    margin-top:-159px;
    position:float;
    padding-left:120px;
    padding-right:250px;
    margin-bottom:-100px;
    z-index:200;
    overflow:visible;
}

<强>更新

我已经在这里分发了你的jsfiddle http://jsfiddle.net/HX4hH/下面的变化您的图像没有显示，所以我使用了彩色块。

.con-1
{
    background:green;
    display:compact;
    margin-top:15px;
    margin-left:50px;
    position:relative;
    width:928px;
    height:140px;
    margin-bottom:10px;
    overflow:hidden;

}

.con-1:before
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:159px;
    background:red;
    left:4px;
    top:-159px;

}

.con-1:after
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:65px;
    top:0px;
    background:yellow;
}

 .con-1:hover
{
    height:auto;
    overflow:visible;
    background:blue;
    margin-top:170px;
    margin-bottom:100px;
}
.con-1:hover p {
    margin-top:-290px;
    overflow: visible;
    height: auto;
    display: inline-block;
}

仅在使用css时悬停段落更改

3 个答案: