2014-02-19 2 views
0

Я хочу изменить divs рядом с моим, когда они парят, чтобы сделать их меньшими, что позволяет мне увеличиваться. Однако, пытаясь использовать «+» или «не могу», похоже, заставить его работать.изменение 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> 
+4

Какой тег 'footerL'? Также вы вставляли в свой CSS дважды, ни один HTML не сделал этого. И последнее, но не менее важное: что такое CSS для исходного состояния элементов? – Jasper

+0

Можете ли вы вставить свой html? Похоже, что ваш CSS случайно дублирован. Кроме того, вы можете уточнить, хотите ли вы divs по обе стороны от того, который вы намереваетесь изменить размер, или только на одну сторону? –

+0

обе стороны извините. Исходное состояние элементов - это просто ширина и цвет фона. – user2786754

ответ

2

способ сделать это с помощью только 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/

Смежные вопросы