html - 悬停旁边的 div 时更改 div

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/