通过没有javascript的鼠标悬停显示元素

Question

我想在某些事情上阻止jquery，因此在这里偶然发现了这篇文章：Displaying submenus on hover without javascript

所以，我尝试用一​​个非常简单的测试来实现它：

<div class="trigger-hover">Hover this</div>
<div class="target-hover">Supersecret content</div>

因此css就像这样：

.target-hover{
    display:none;
    background:red;
    padding:300px;
    text-align:center;
    vertical-align: middle;
}

.trigger-hover:hover div.target-hover{
display:block;
}

但这并不能为我做任何事情。有什么诀窍呢？要显示的目标是否嵌套在触发元素中？它是语法中的东西吗？

由于

Answer 1

-w会在 .trigger-hover:hover div.target-hover {...}中显示.target-hover ，而您的.trigger-hover会相邻。你会想要使用：

div

显示相邻的.trigger-hover:hover + .target-hover { display:block; }

div

.target-hover {
  display: none;
  background: red;
  padding: 300px;
  text-align: center;
  vertical-align: middle;
}

.trigger-hover:hover + .target-hover {
  display: block;
}

Answer 2

＆＃13;

＆＃13;

.target-hover {
    display: none;
}
.trigger-hover:hover ~.target-hover{
    display: block;
}

＆＃13;

<div class="trigger-hover">Hover this</div>
<div class="target-hover">Supersecret content</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.trigger-hover:hover div.target-hover表示target-hover div位于trigger-hover div内，但在您的HTML中，它们是一个接一个。