为什么将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的兄弟姐妹？

回答

相关问题