0

有没有办法为一组 div 设置默认宽度，然后更改每个宽度，而不管 CSS 中的顺序如何？示例 JSFiddle 位于http://jsfiddle.net/RfHSA/。

我试图将每个 div 设置为width:20%，但是当鼠标悬停在其中一个内部 div 时，悬停的特定 div 应该设置为width:72%，其他设置为width:7%（包括在 HTML 结构中出现在它之前的那些） . 仅使用 CSS 是否可行，还是需要 Javascipt/jQuery？

编辑：我想要实现的示例在这里：http ://www.kriesi.at/themes/newscast/

4

4 回答 4

3

我想推荐一个简单的解决方案来满足您的需求：http: //jsfiddle.net/linmic/qcnmu/1/

我们只需将 display: table 应用于“listwrapper”并将 display: table-cell 应用于“outerbox”，然后一切正常。

干杯

于 2012-05-25T19:30:44.977 回答
1

你在那里 99%：http: //jsfiddle.net/RfHSA/2/

.featuredwrapper {
    width:100%;
    height:350px;
    margin:auto;
    background-color:rgba(0,0,0,0.5);
    padding-top:12px;
    position:relative;
}

.listwrapper {
    width:95%;
    max-width:1100px;
    height:325px;
    margin:auto;
    position:relative;
}

.listwrapper:hover .outerbox {
    width:7%;
}
.outerbox {
    width:20%;
    height:100%;
    display:inline-block;
    background-color:#e8e8e8;
    margin-left:-4px;
    box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
    -webkit-transition: width .3s ease-out;    
}

.listwrapper:hover .outerbox:hover {
    width:72%;
}

.outerbox:first-child{
    margin-left:0px;
}

.hoveractive {
    position:absolute;
    width:95%;
    height:325px;
    z-index:1000;
    padding-top:12px;
}

我最低限度地修复了它们都错误地关闭，我认为与百分比宽度相关的十进制宽度相关的剩余问题......

于 2012-05-25T19:19:14.543 回答
0

http://jsfiddle.net/RfHSA/15/

这是您的脚本的工作版本。您肯定需要在这里进行一些 javascript 操作才能使其正常工作。我尝试尽可能少地使用，从结果中可以看出，它有点不稳定，但希望它能让你走上正确的轨道。

编辑：哦，好吧，我试过了，但是其他人的解决方案更好=P

于 2012-05-25T19:44:18.530 回答
0

更新以防止过早崩溃

调整你的 CSS 给出了这个解决方案（见 fiddle）。它需要padding-top从 the 移动.listwrapper到 the.featuredwrapper以防止从顶部入口过早崩溃：

调整 CSS

.outerbox {
    width:20%;
    height:100%;
    display:inline-block;
    background-color:#e8e8e8;
    margin-left:-4px;
    box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
    -webkit-transition: width .3s ease-out;    
}

/*prevents premature collapse on right side entry*/
.outerbox:last-of-type:after { 
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -2px;
}

.listwrapper:hover .outerbox {
    width: 7%;
}

.listwrapper .outerbox:hover {
    width:72%;
}
于 2012-05-25T20:02:33.340 回答