爲什麼將div中的元素懸停會影響div的兄弟姐妹？

我提供了兩張照片來展示正在發生的事情。徘徊前：爲什麼將div中的元素懸停會影響div的兄弟姐妹？

徘徊後：

的XHTML代碼：

<body> 
     <div> 
     <div class="channel"><img src="./logos/svt1.png" alt="Channel logotype" /><div class="chName">SVT1</div> 
      <ul> 
       <li> 
        <div class="prog">01.20 Plus</div> 
        <div class="info">Program info here</div> 
       </li> 
       <!--more <li>--> 
      </ul> 
     </div> 
     <div class="channel"><img src="./logos/svt2.png" alt="Channel logotype" /><div class="chName">SVT2</div> 
      <ul> 
       <li> 
        <div class="prog">01.00 Rapport</div> 
        <div class="info">Program info here</div> 
       </li> 
       <!--more <li>--> 
      </ul> 
     </div> 
     <!-- and more <div> --> 
     </div> 
    </body>

這裏是我的CSS：

body{ 
position: absolute; 
} 

img{ 
    position: relative; 
    top: 0; 
    height: 60px; 
    width: auto; 
    margin-left: 30px; 
} 

ul{ 
    list-style-type: none; 
    font-size: 12px; 
} 

li{ 
    padding-bottom: 1em; 
} 

li:hover .info{ 
    display: block; 
} 

li:hover{ 
    border: solid 1px darkgrey; 
} 

div{ 
    display: table; 
} 

.channel{ 

    display: inline-block; 
    width: 32%; 
    height: auto; 
    padding: 5px; 
    top: 0; 
} 

.chName{ 
    position: relative; 
    float: right; 
    top: 0; 
    margin-top: 30px; 
    margin-right: 40%; 
    font-weight: bold; 
} 

.info{ 
    display: none; 
    font-weight: bold; 
}

所以我想知道就是爲什麼<li>的徘徊與類=頻道，以及如何解決這一問題影響<div>秒。

如果需要更多的詳細信息，請評論。由於

編輯： http://jsfiddle.net/robbannn/53j38uyh/

來源

2015-10-15 robbannn

你介意作出的jsfiddle？ –

我絕對可以試試！ – robbannn

這是因爲.channel設置爲display: inline-block;這意味着垂直取向被兌現。內聯元素的默認垂直對齊方式是baseline。當你將鼠標懸停在li要更改.info到display: block;這意味着基線是不同的。

要修復此問題，請將vertical-align: top;添加到.channel，它將確保.channel始終與父項的頂部對齊。

body { 
 
    position: absolute; 
 
} 
 
img { 
 
    position: relative; 
 
    top: 0; 
 
    height: 60px; 
 
    width: auto; 
 
    margin-left: 30px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    font-size: 12px; 
 
} 
 
li { 
 
    padding-bottom: 1em; 
 
} 
 
li:hover .info { 
 
    display: block; 
 
} 
 
li:hover { 
 
    border: solid 1px darkgrey; 
 
} 
 
div { 
 
    display: table; 
 
} 
 
.channel { 
 
    display: inline-block; 
 
    width: 32%; 
 
    height: auto; 
 
    padding: 5px; 
 
    top: 0; 
 
    vertical-align: top; 
 
} 
 
.chName { 
 
    position: relative; 
 
    float: right; 
 
    top: 0; 
 
    margin-top: 30px; 
 
    margin-right: 40%; 
 
    font-weight: bold; 
 
} 
 
.info { 
 
    display: none; 
 
    font-weight: bold; 
 
}

<div> 
 
    <div class="channel"> 
 
    <img src="./logos/svt1.png" alt="Channel logotype" /> 
 
    <div class="chName">SVT1</div> 
 
    <ul> 
 
     <li> 
 
     <div class="prog">01.20 Plus</div> 
 
     <div class="info">Program info here</div> 
 
     </li> 
 
     <!--more <li>--> 
 
    </ul> 
 
    </div> 
 
    <div class="channel"> 
 
    <img src="./logos/svt2.png" alt="Channel logotype" /> 
 
    <div class="chName">SVT2</div> 
 
    <ul> 
 
     <li> 
 
     <div class="prog">01.00 Rapport</div> 
 
     <div class="info">Program info here</div> 
 
     </li> 
 
     <!--more <li>--> 
 
    </ul> 
 
    </div> 
 
    <!-- and more <div> --> 
 
</div>

來源

2015-10-15 08:24:17

感謝您的快速回復！和一個很好的解釋！ – robbannn

沒問題，很高興我能幫上忙。 –

爲什麼將div中的元素懸停會影響div的兄弟姐妹？

回答

相關問題