Question

是否有办法为一组 divs 设定默认宽度, 但是在 CSS 中更改每个宽度, 而不考虑顺序? 例如 JSFiddle 是在 < a href=" http:// jsfiddle. net/ RfHSA/" rel= “ nofollow” > http://jsfiddle. net/ RfHSA/ 。

我试图将每个 div 设置为 < code> width: 20/ code >, 但当鼠标悬浮在一个内部divs 时, 特定的 div 悬浮点应该设置为 < code> width: 72/ code >, 而其他的则设置为 < code> width: 7/ code > (包括 HTML 结构中之前发生的情况) 。仅使用 CSS, 或者需要 Javascipt/ Javascipt/ JQuery 吗?

编辑:我试图实现的目标的例子在这里:http://www.kriesi.at/times/newscast/

Answer 1

我想建议一个简单解决你需要的办法:http://jsfiddle.net/linmic/qcnmu/1/

我们简单地应用显示: 表格到“ list wrapper ” 并显示: 表格单元格到“ 发件箱 ”, 那么一切正常。

干杯干杯

Answer 2

你当时占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;
}

我略微固定了他们所有的错误关闭, 我认为剩下的问题与小数点宽度有关与%宽度有关...

Answer 3

http://jsfiddle.net/RfHSA/15/" rel=“no follow'>http://jsfiddle.net/RfHSA/15/

这里有您脚本的工作版本。您绝对需要一些 javascript 操作, 才能成功。我试图尽可能少地使用它。正如您从结果中看到的, 它有点摇晃, 但希望它能让你走上正确的轨道。

哦,好吧,我试过了, 但另一个家伙的解决方案更好 =P

Answer 4

为防止过早倒塌更新 < 强 > 以防止过早倒塌

调整您的 CSS 给这个解决方案( < a href=" http://jsfiddle. net/ RfHSA/ 27/" rel= "nofollow" > 见 fidle )。它要求 < code> > padding- top 从 < code>. listlovelper 移动到 . featured wrapper , 以防止上条目过早崩溃 :

< 坚固 > 变强 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%;
}

友情链接