我有以下代码来显示悬停时的分区。它最初是隐藏的,我试图在另一个元素的悬停上显示一个分区。

.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/

10-12 12:38
查看更多