當它旁邊有一個徘徊的時候改變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

回答

相關問題