当它旁边有一个徘徊的时候改变div

我想改变我旁边的div，当它们被缩小时，让它变小，让我变得更大。但是，当试图使用+或〜我似乎无法使其工作。当它旁边有一个徘徊的时候改变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>

来源

2014-02-19 user2786754

什么样的标签是'footerL'？你也粘贴了你的CSS两次，没有HTML做它。最后但并非最不重要的是，元素初始状态的CSS是什么？ – Jasper

你能粘贴你的html吗？它看起来像你的CSS被意外重复。另外，你能否澄清一下你是否希望在你悬停的那一边的div上改变大小，或者只在一边？ –

双方我道歉。元素的初始状态仅仅是宽度和背景颜色。 – user2786754

只用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/

来源

2014-02-19 19:57:11 Jasper

当它旁边有一个徘徊的时候改变div

回答

相关问题