我有以下代码来显示悬停时的分区。它最初是隐藏的,我试图在另一个元素的悬停上显示一个分区。
.topNav {
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu {
list-style-type: none;
}
.mainMenu li {
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a {
text-decoration: none;
color: white;
}
#item1 {
display: block;
}
#item1:hover #item1detail {
background: #444;
visibility: visible;
}
#item1detail {
position: absolute;
top: 152px;
left: 250px;
background: #ccc;
width: 750px;
height: 400px;
border: solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" href=""> item 1</a>
</li>
<li><a href=""> item 3</a>
</li>
<li><a href=""> item 4</a>
</li>
<li><a href=""> item 5</a>
</li>
<li><a href=""> item 6</a>
</li>
<li><a href=""> item 7</a>
</li>
<li><a href=""> item 8</a>
</li>
<li><a href=""> item 9</a>
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>
在列表项
item1
悬停时,我想显示除法itemdetail
。上面的代码不起作用。我做错什么了? 最佳答案
在我看来,不接触HTML就显示给定div的唯一解决方案是Javascript。。。正如其他人已经建议的那样。。。
但是。。。这里有一个解决方案,只需对HTML和CSS做一点小小的修改。
主要问题是这个CSS选择器:
#item1:hover #item1detail
它将转换为“id item1悬停id item1内部的id item1细节”。
可以通过将div放在li内并将选择器更改为:
#item1:hover + #item1detail
因为div是绝对定位的,所以在视觉上没有区别。。。至少你的片段。。。
更新的代码段版本:
.topNav
{
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu
{
list-style-type: none;
}
.mainMenu li
{
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a
{
text-decoration: none;
color: white;
}
#item1
{
display: block;
}
#item1:hover + #item1detail
{
background: #444;
visibility: visible;
}
#item1detail
{
position: absolute;
top: 152px;
left: 250px;background: #ccc;
width: 750px;
height: 400px;
border:solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li >
<a id="item1" href=""> item 1</a>
<div id="item1detail">
Some random content
</div>
</li>
<li><a href=""> item 3</a></li>
<li><a href=""> item 4</a></li>
<li><a href=""> item 5</a></li>
<li><a href=""> item 6</a></li>
<li><a href=""> item 7</a></li>
<li><a href=""> item 8</a></li>
<li><a href=""> item 9</a></li>
</ul>
</div>
关于html - CSS3显示了将鼠标悬停在另一个元素上的划分,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31415507/