Question

我想改变我们旁边的div，以便让它们变小，让我的变大。然而，当试图使用+或〜我似乎无法让它工作。

CSS

.MobileFM footerL img:hover + footerR{
    background:white;
}
.MobileFM footerL img:hover + footerM img{
    width: 30%;
}
.MobileFM footerL img:hover {
    width:34%;
}

HTML

<div class="MobileFM">
            <footerL>  <img ng-click="clickPic('help')" ng-src="pic/help.png"> 
             </footerL>
            <footerM> <img ng-click="clickPic('scan')" ng-src="pic/scan.png">
             </footerM>
            <footerR> <img ng-click="clickPic('feedback')" ng-src="pic/feedback.png"> </footerR>

    </div>

Answer 1

使用CSS执行此操作的方法是将元素包装在某些内容中（您已经完成），然后使用包装器和子元素进行悬停效果。基本的想法是，当包装元素悬停时，它会使所有的孩子变小，但当其中一个孩子徘徊时，那个特定的孩子会长大。

示例HTML：

<div id="wrapper">
    <div style="background:red;">a</div>
    <div style="background:blue;">b</div>
    <div style="background:green;">c</div>
</div>

示例CSS：

#wrapper {
    width : auto;
    float : none;
}
div {
    width      : 33%;
    float      : left;
    height     : 25px;
    text-align : center;
}

#wrapper:hover div {
    width : 25%;
}

#wrapper div:hover {
    width : 50%;
}

演示链接：http://jsfiddle.net/F36W8/

当旁边的一个人徘徊时改变div

1 个答案: