CSS 변경 div 다른 div에 마우스를 올려 놓을 때

Question

다른 div에 마우스를 올려 놓으면 div가 변경됩니다. 나는이 일을 전에는 수 백만 번 해왔지만 어떤 이유로 인해 나는 왜 이것이 작동하지 않는지를 볼 수 없다.

CSS

#floatimg:hover > #float_tools 
{ 
opacity: 1; 
} 
#float_tools 
{ 
width: 150px; 
margin: auto; 
opacity: 0.3; 
} 

HTML

<div id='floatBox'> 
     <div id='float_image'> 
      <img id="floatimg" src=""> 
     </div> 
     <div id='float_tools'> 
      <div id='float_prev'><a href='javascript:void' onclick=''><img src='images/Button_Prev.png' width='50px'></a></div> 
      <div id='float_close'><a href='javascript:void' onclick=''><img src='images/close.png' width='50px'></a></div> 
      <div id='float_next'><a href='javascript:void' onclick=''><img src='images/Button_Next.png' width='50px'></a></div> 
     </div> 
    </div> 

Answer 1

그것은 단순히이다 :

그것은 더 좋은 방법이 될 것입니다.

같은 것을보십시오 :

<div id='floatBox'> 
     <div id='float_image'> 
      <img id="floatimg" src=""> 
      <div id='float_tools'> 
       <div id='float_prev'><a href='javascript:void' onclick=''><img src='images/Button_Prev.png' width='50px'></a></div> 
       <div id='float_close'><a href='javascript:void' onclick=''><img src='images/close.png' width='50px'></a></div> 
       <div id='float_next'><a href='javascript:void' onclick=''><img src='images/Button_Next.png' width='50px'></a></div> 
      </div> 
     </div> 
    </div> 

CSS : 나는 행운과도 그런 식으로 해봤

#float_image:hover > #float_tools 
{ 
opacity: 1; 
} 
#float_tools 
{ 
width: 150px; 
margin: auto; 
opacity: 0.3; 
} 

Answer 2

당신이 기호 (>)보다 더 큰를 사용하려고 영향을받는 요소는 공중 선회 요소의 직접 자식이어야한다. HTML에서 hover 요소와 영향을받는 요소는 서로 직접 관련이 없습니다. #float_tools 사업부는 #floatimg의 직접적인 아이가 아니기 때문에

#float_image:hover + #float_tools 
{ 
opacity: 1; 
} 
#float_tools 
{ 
width: 150px; 
margin: auto; 
opacity: 0.3; 
} 

Here is a fiddle