CSS 호버 선택기가 작동하지 않습니다.

Question

[.area] 클래스를 가리키면 [.button] 클래스가 변경되지만 작동하지 않습니다. 내가 무엇을 할 수 있을지?

는 여기가 좋을 것 내 코드

#content { float:left; margin:0 20px 20px 0; } 
.area { z-index:0; position:relative; border-radius:5px; border:3px #09B2D2 solid; height:430px; width:245px; transition: all .5s; } 
.area:hover { background:#09b2d2; } 
.area:hover .words { color:#fff; } 
.head { background:#09b2d2; width:245px; margin-top:25px; text-align:center; font-family:Segoe UI; font-size:30px; text-transform:uppercase; padding:3px 0; font-weight:bold; color:#fff; } 
.words { margin-top:25px; line-height:40px; text-align:center; color:#09b2d2; font-family:Segoe UI; font-weight:bold; transition: all .5s; } 
.button { z-index:1; transition: all .5s; left:57px; background:#fff; top:-20px; border-radius:3px; border:2px solid #09B2D2; width: 125px; height: 40px; position:relative; text-align:center; } 
.button:hover { background:#09b2d2; } 
.button:hover .h1 { opacity:0; } 
.button:hover .h2 { opacity:100; } 
.h1 { transition: all .5s; z-index:2; margin:4px 0 0 -32px; font-weight:bold; color:#09B2D2; font-family:Segoe UI; font-size:20px; position:absolute; } 
.h2 { margin:5px 0 0 -36px; transition: all .5s; z-index:2; opacity:0; font-weight:bold; color:#fff; font-family:Segoe UI; font-size:20px; position:absolute; } 
.h2 > a { color:#fff; text-decoration:none;} 

<div id="content"> 
    <div class="area"> 
     <div class="head">Başlangıç</div> 
     <div class="words">Wordpress Teknolojisi</br>1 Yıl Alan Adı Tescili</br>500 MB Hosting</br></br>Seo Desteği</br>Ücretsiz Destek</br>Kontrol Paneli</div> 
    </div> 
    <div class="button"> 
    <span class="h1">100 TL</span> 
    <span class="h2"><a href="#">Satın Al</a></span> 
    </div> 
</div> 

Answer 1

입니다 :

는

.area:hover + .button { 
    /* CSS here */ 
} 

이 스타일은 이전-형제 .area는 공중 선회 오버하는 .button 요소를.

원래 코드가 작동하지 않은 이유는 .area:hover을 타겟팅하거나 해당 요소와 관련하여 .button 요소를 지정했기 때문입니다.

는 덜 제한 만들려면 :

.area:hover ~ .button { 
    /* CSS here */ 
} 

이것은 공중 선회 년대 .area 요소보다 DOM에 나중에 나타나는 형제 .button 요소의 스타일을 것입니다.

+

합니다 ( .area 직후 나타나는 만 .button 요소를 선택한다)를 인접 형제 연결자되면, ~는 모든 .button 요소를 선택할 것이다 일반 형제 연결자이라고 .area eleent를 따라 가십시오.

참고 :

• CSS sibling combinators.