CSS3显示了另一个元素的悬停

Question

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

.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。上面的代码不起作用。我做错了什么？

Answer 1

As I see it the only solution to display the given div without touching the HTML would be Javascript... As the others suggested already...

BUT... there's a solution with one slight change to your HTML and CSS each.

The main problem is this CSS-selector:

#item1:hover #item1detail

which would translate to "id item1detail INSIDE of an hovered id item1".

You can fix this by placing the div inside of the li and change the selector to:

#item1:hover + #item1detail

Since the div is positioned absolute anyway it doesn't make a visual difference... at least for your snippet...

Updated version of your snippet:

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

Answer 2

你必须使用javascript

<script>
function myFunction() {
            if (document.getElementById("item1detail").hidden==false){
                document.getElementById("item1detail").hidden = true;
            }else{
                document.getElementById("item1detail").hidden = false;
            }
        }
</script>

和

<div class="topNav">
  <ul class="mainMenu">
    <li><a id="item1" onhover="myFunction()" 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>

Answer 3

我会用jQuery做到这一点。

$('#item1').hover(function(){
  $('#item1detail').show();
}, function(){
  $('#item1detail').hide();
});

Answer 4

您的CSS无法正常工作的原因是因为您正在使用此选择器：

#item1:hover #item1detail

如果#item1detail元素悬停，则选择ID为#item1的元素中包含标识为#item1的元素。

在您当前的标记中，#item1detail 在 #item1之外，因此与选择器不匹配。移动#item1detail可以获得您想要的行为。 （从那时起，可能会有一些布局工作要做。）

Answer 5

#item1detail元素不是#item1元素的兄弟，因此这就是#item1:hover #item1detail CSS规则不适用的原因。

我相信如果只使用CSS（不是JavaScript），那么你必须让#item1detail成为#item1的兄弟。