个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我提供两张图片来展示正在发生的事情。悬停前:
悬停后:
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> s with class = channel，以及如何解决这个问题。
如果需要更多详细信息，请发表评论。谢谢
最佳答案
这是因为 .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>关于css - 为什么将元素悬停在 div 中会影响 div sibling ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33143298/
25
4
0
我一直在使用 angular-ui-router 并尝试从同一抽象的另一个 child 中转换到我的一个抽象状态的 child 。这张图更好地展示了这个想法: 所以“R”是模块，“蓝色 1”是我的抽象
很难解释我遇到的这个问题，因为有很多变数。 我的网站使用 javascipt 根据屏幕分辨率调整固定包装的大小，因此所有 div 都必须调整为 3 种不同的宽度，这就是使这个问题如此困难的原因.. H
我必须选择h1节点之间的所有内容。 Index some content some more content Index 2 some content other content Index 3 s
我目前正在使用已使用自定义 xml 转换器转换为 xml 的 VDA 消息类型。但是，源文档中的每个标题和行记录都处于同一级别，如下面的示例所示: 512
我需要查明 Table_3 是否包含属于某个父级的子级的所有 sibling 。例如，我询问 12 号 child (家长 1 = Charles)。 Table_2 告诉我他还有 2 个 sibli
所以我想选择一组元素中的最后一个兄弟元素，但是父容器中有多个元素。 Some text 所以在这种情况下，对于每一 block .select
我正在尝试为我的网站做一种 Accordion ，类似于 this website 上的那个。 , 但没有切换。 我正在使用的代码是 here . 我有基本的设置工作，但我似乎无法让 li 的高度正确
我很难尝试实现 XSL 转换。 我需要改变这个: 1 Homepage AB308E 5
我正在尝试创建一个爬虫来从供应商网站中提取一些属性数据，我可以根据我们的内部属性数据库对其进行审核，并且是 import.io 的新手。我看了一堆视频，虽然我的语法似乎是正确的，但我的手动 xpath
这是我的 xml 的摘录: content content 我定位在node[@id='1'] .我需要一个 Xpath 来匹配所有 元素直到下一个非空节点(这里是 node[@id='
我正在使用 Selenium-Python 来抓取此链接中的内容。 http://targetstudy.com/school/62292/universal-academy/ HTML代码是这样的，
这个问题在这里已经有了答案: Is there a CSS parent selector? (33 个答案) 关闭 4 年前。
代码笔:https://codepen.io/andrelange91/pen/VyjYBg 我做了以下声级示例，它应该在悬停时填充其他条。但目前是落后的...而且我一直没能找到一种方法(尽管我敢打赌
在下面的示例中，我试图获取所有 之前(包括当前的 ) class="current"具有番茄背景色。 所以在这个例子中:1、2、3、4 和 5 的背景颜色是番茄。 如果 我需要它来更新那class
在下面的例子中， h2 p p p h2 p p p h2 我只想在 h2.first 和 h2.second 之间选择 p。我试过 select si
对于下面的示例 HTML，返回具有 class='A' 和 class='B' 的“a”元素的 sibling 的 XPath 查询可以写为://a[@class='A']/following-sib
鉴于此 XML/HTML: Label1Value1 Label2Value2 Label3Value3aValue3b Label4Value4 我想找到所有 ，然后为每个找到
这是我在 StackExchange 的第一篇文章，如果我做错了什么，请多多包涵: 我有一个从产品数据库派生的 XML 文件，其中所有分组信息都丢失了，除了元素的顺序。所有产品都有一个首先出现的商品编
我希望以易于理解的方式描述我的问题。 我的 html 看起来像这样: AAAA BBBB 我想要 TextArea 的 Xpath(其中标签的值为 AAAA)用 Sel
我是一名优秀的程序员,十分优秀！