div가 옆에있을 때 div가 변경 될 때

내 옆에있는 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가 옆에있을 때 div가 변경 될 때

답변

관련 문제