誰かがCSSのホバーオプションを手助けできますか？

Question

私はCSSホバーの問題があります。あなたは、何が間違っているのか教えてください。ここで

<div class = "prof_line1"> 
     <div class = "prof_image" id = "kristaps_pic"> 
      <img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img> 
      <p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p> 
     </div> 
     <div class = "prof_image" id = "alise_pic"> 
      <img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img> 
      <p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p> 
     </div> 
    </div> 
    <div class = "prof_info" id = "kristaps_info"> 
     <p>Kristaps Slakters Zvejsalnieks Pasaules līmenī godalgots frizieris/ stilists/dizaineris kuram savu imidžu uztic Latvijas, Krievijas un Īrijas slavenības un mākslinieki. Daudz ceļojis un vācis pieredzi dažādās valstīs.</p> 

     <p><b>Studējis:</b> Rīgas Stila un Modes profesionālajā vidusskolā Baltijas Krievu Institūtā – vides dizainu. Colomer Akadēmijā Dubinā ieguvis Color Specialist Degree, 6 mēnešus pavadījis apmācībā „Tony and Guy” Akadēmijā, 2007- 2009 apguvis Barber profesiju „Hackett's Barber Academy”, 2011 ieguvis „American Crew” Creative Barber diplomu.</p> 

     <p><b>Apbalvojumi un godalgas:</b></p> 
     <p> hudge text box 
    </div> 

はスタイルであり、これは事がある

.prof_info { 
    font-size:15px; 
    border:3px solid black; 
    width:914px; 
    margin-top:30px; 
    margin-left:50%; 
    transform:translate(-50%); 
    -webkit-transform:translate(-50%); 
    display:none; 
    z-index:1; 

} 

    #kristaps_pic p:hover+#kristaps_info { 
      display:block; 

     } 

Answer 1

... +セレクタ、p要素の後に非常に下記の要素を選択する動作していない理由を本当に理解していけません。それがうまくいかない理由です。

#kristaps_pic:hover + #kristaps_info { 
display:block; 
} 

をそれとも、単にPをホバリング場合 #kristaps_info をフックしたい場合は、次のビットをあなたのマークアップを変更する必要があります：あなたがしようとした場合、このようなものは確かに動作します

<div class = "prof_line1"> 
    <div class = "prof_image" id = "kristaps_pic"> 
     <img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img> 
     <p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p> 
     <div class = "prof_image" id = "alise_pic"> 
     <img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img> 
     <p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p> 
     </div> 
    </div> 

</div> 

Answer 2

CSSは別の方法で動作しました。

.prof_info { 
 
    font-size: 15px; 
 
    border: 3px solid black; 
 
    width: 914px; 
 
    margin-top: 30px; 
 
    margin-left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    display: none; 
 
    z-index: 1; 
 
} 
 

 
#kristaps_info { 
 
    display: none; 
 
} 
 

 
#kristaps_pic p:hover+#kristaps_info { 
 
    display: block; 
 
}

<div class="prof_line1"> 
 
    <div class="prof_image" id="kristaps_pic"> 
 
    <img src="http://pokkers.lv/slakters/hhimages/krissprof.jpg"> 
 
    <p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p> 
 
    <div class="prof_info" id="kristaps_info"> 
 
     <p>Kristaps Slakters Zvejsalnieks Pasaules līmenī godalgots frizieris/ stilists/dizaineris kuram savu imidžu uztic Latvijas, Krievijas un Īrijas slavenības un mākslinieki. Daudz ceļojis un vācis pieredzi dažādās valstīs.</p> 
 
     <p><b>Studējis:</b> Rīgas Stila un Modes profesionālajā vidusskolā Baltijas Krievu Institūtā – vides dizainu. Colomer Akadēmijā Dubinā ieguvis Color Specialist Degree, 6 mēnešus pavadījis apmācībā „Tony and Guy” Akadēmijā, 2007- 2009 apguvis Barber 
 
     profesiju „Hackett's Barber Academy”, 2011 ieguvis „American Crew” Creative Barber diplomu.</p> 
 
     <p><b>Apbalvojumi un godalgas:</b></p> 
 
     <p> hudge text box 
 
    </div> 
 
    </div> 
 
    <div class="prof_image" id="alise_pic"> 
 
    <img src="http://pokkers.lv/slakters/hhimages/alise.jpg"> 
 
    <p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p> 
 
    </div> 
 
</div>