Question

CSS :hover在我使用它自己的元素时起作用，但是当我试图影响另一个元素时，它没有效果。

例如，当我将鼠标悬停在此按钮时，隐藏的链接应该出现，但它们不会出现。

.dropdown {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  width: 200px;
}
.dropbutton {
  width: 100%;
  height: 60px;
  color: white;
  background: #017678;
  border: none;
}
.dropcontent a {
  color: black;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  height: 40px;
  background-color: #DDD;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #9fa0a8;
  display: none;
}
a:last-of-type {
  border: none;
}
.dropbutton:hover .dropcontent {
  display: block;
}

<div class="dropdown">
  <button class="dropbutton">SHOW CONTENT</button>
  <div class="dropcontent">
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
  </div>
</div>

Answer 1

空格是descendant combinator。它以后代为目标，但div不是按钮的后代，而是兄弟。

您需要使用adjacent sibling combinator代替：加号。

您还需要定位链接（它们是display: none的后代，因此您应该在那里使用后代组合子），因为它是您已设置.dropbutton:hover + .dropcontent a {而不是div的那些。

return b.execute_script("return validateLoginForm()")

Answer 2

我将display: none;移动到.dropcontent本身 - 因为它现在属于它的锚点，即链接，因此，当前的答案都不起作用 - 然后使用

.dropbutton:hover + .dropcontent
{
    display: block;
}

但是之后你不能在dropbutton和dropcontent之间添加任何东西，否则它将不再起作用。

Answer 3

您使用Javascript执行此操作吗？

var button = document.getElementsByClassName('.dropbutton')[0],
    menuContent = docuemnt.getElementsByClassName('.dropcontent')[0];

button.onmouseover = function(event) {
    menuContent.style.display['block'];
}
button.onmouseout = function(event) {
    menuContent.style.display['none'];
}

对CSS略有改动：.dropbutton应该有display: none，您应该从display: none

中移除.dropcontent a

CSS悬停不会影响其他元素

3 个答案: