Question

当我将鼠标悬停在带有class =“ fas fa-bars”的元素上时，我想使“ .navbar-drop”可见（显示：块）。

不起作用：

.navbar-drop {
    display: none;
}
.navbar i:hover .navbar-drop {
    display: block;
}

这是html：

 <div class="navbar">
        <div class="navbar-drop">
            <ul>
                <li><a href="#" class="home">Home</a></li>
                <li><a href="#" class="about-me">About Me</a></li>
                <li><a href="#" class="my-projects">My Projects</a></li>
                <li><a href="#" class="contact-me">Contact Me</a></li>
            </ul>
        </div>
        <i class="fas fa-bars"></i>
    </div>

如果这是重复的话，我深表歉意，但是我已经搜索了近半个小时，找不到任何我能理解的东西。

Answer 1

您不能选择父元素，需要遵循CSS选择器的规则。对于这种情况，正确的是：

.navbar:hover .navbar-drop {
    display: block;
}

也就是说，将鼠标悬停在.navbar标记中时，您将在孩子中设置显示块。.navar-drop并非易选择，请选择一个父元素或使用CSS选择器规则无法实现的

Answer 2

不，我认为CSS不可能做到这一点，但是jQuery可以实现。

我将通过使用jQuery

修复它

  $( ".navbar i" ).hover(
  function() {
    $( ".navbar-drop" ).css( "display", "block" );
  }, function() {
    $( ".navbar-drop" ).css( "display", "none" );
  }
);

希望这会有所帮助：）

已编辑

：

这在如下所示的普通JavaScript中也是可能的

var hoverPoint = document.getElementsByClassName("fas")[0];
var endPoint = document.getElementsByClassName("navbar-drop")[0];

hoverPoint.addEventListener('mouseover', function() {
   endPoint.classList.add('hovered');
});

hoverPoint.addEventListener('mouseout', function() {
    endPoint.classList.remove('hovered');
});

然后将其复制到您的CSS：-）

.navbar-drop.hovered {
display: block;
}
.navbar-drop {
display: none;
}

将鼠标悬停在同一个父对象中的另一个类上时，是否可以显示一个类？

2 个答案: