将鼠标悬停在元素上会显示第二个元素。如何在悬停第一个元素后保持第二个元素可见？

Question

我正在尝试使用<a>元素在HTML / CSS中创建一个下拉菜单。到目前为止，我已设法获得辅助<a>（当第一个<a>没有悬停时，不显示/隐藏）。这本身对我来说是一个巨大的成功，但我的问题是，当我不再悬停第一个<a>时，第二个消失，这使得无法点击辅助<a>。 / p>

只要我在第二个<a>上空徘徊，我该如何让它停留？

＆＃13;

＆＃13;

body {
  background-color: rgb(245, 245, 220);
}
.dropdownbutton {
  display: block;
  width: 236px;
  height: 35px;
  background-color: #8B6969;
  text-align: center;
  font-family: Verdana;
  line-height: 33px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.dropalt1 {
  display: none;
  width: 236px;
  height: 35px;
  background-color: white;
  text-align: center;
  font-family: Verdana;
  line-height: 33px;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.dropdownbutton:hover + .dropalt1 {
  display: block;
}
a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  color: black;
  text-decoration: none;
}
a:active {
  color: white;
  text-decoration: none;
  background-color: rgb(128, 128, 128);
}
a:hover {
  color: white;
  text-decoration: none;
  background-color: rgb(128, 128, 128);
}

＆＃13;

<a class="dropdownbutton" href="#">Click me!</a>
<a class="dropalt1" href="#">Link 1</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该考虑使用包装元素。例如，当（两个元素的）父包装器悬停在上面时，您应该显示感兴趣的元素（这将扩展父元素）。

只有在离开父母时，才会隐藏目标项目。

.hidden-child {
    display: none;
}

.parent:hover .hidden-child {
    display: block;
}

非常rudimentary example

Answer 2

您可以添加此样式以强制第二个锚点在其悬停时保持可见：

.dropalt1:hover {
  display: block;  
}

Fiddle

Answer 3

您只需添加 test=# \d attack; Table "public.attack" Column | Type | Modifiers --------+-------------------+----------------------------------------------------- age | integer | gender | character varying | id | integer | not null default nextval('attack_id_seq'::regclass) Indexes: "attack_pkey" PRIMARY KEY, btree (id) 并将其设为显示块，以便在悬停时保持可见状态。

将此添加到您的CSS文件中：

.dropalt1:hover