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>

有人可以协助CSS悬停选项

2 个答案: