如何使元素在将另一个部分的元素悬停时可见？-解网

问：

[HTML全文]

<nb-sidebar class="menu-sidebar>
  <nb-menu class="sidebar-menu">
     <ul class="menu-items">
        <li class="menu-item ng-tns-c140-0 ng-star-inserted" >
          <a class="ng-tns-c140-0 ng-star-inserted active" ng-reflect-router-link="/pages/dashboard"   title="Dashboard" href="/pages/dashboard">
        </li>
     </ul>
  </nb-menu>
</nb-sidebar>

<div class="content">
  <router-outlet>
    <div class="text">Message</div>
  </router-outlet>
</div>

当我将鼠标悬停在上时可见。router-outletli

我试过这样

router-outlet {
  display: none;
}

nb-sidebar li:hover + .content router-outlet {
     display: block;
}

我只想用 css/scss 来做。我希望将鼠标悬停在上时可见。router-outletli

CSS 悬停 scss-lint

答：

0赞 FuryForever 1/17/2023 #1

您可以使用 jQuery hover（）方法：

p {
  background: orange
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $('h1').css("display", "block");
    }, function(){
    $('h1').css("display", "none");
  });
});
</script>
</head>
<body>
<p>Hover the mouse pointer over this paragraph.</p>
<h1>Title</h1>

</body>
</html>

在您的代码中，它将是：

$(document).ready(function(){
  $("li").hover(function(){
    $('.router-outlet').css("display", "block");}, function(){
   $('.router-outlet').css("display", "none");});
  });

2赞 Adam 1/17/2023 #2

在您的示例中，由于该元素不是该元素的直接同级，因此相邻同级组合器将不起作用（有关详细信息，请参阅 MDN）.content router-outletli

但是，有几种方法可以做到这一点。第一个使用伪类，它很简洁，因为它不需要任何 javascript，但目前并非所有浏览器都支持。凯文·鲍威尔（Kevin Powell）对此做了很好的介绍。此外 caniuse.com 是检查浏览器兼容性的好资源。:has()

注意：我在你的html上添加了一些文本，让你把鼠标悬停在上面。

router-outlet {
  display: none;
}

/* added this */
nb-sidebar:has(li:hover) + .content router-outlet {
     display: block;
}

<nb-sidebar class="menu-sidebar>
  <nb-menu class="sidebar-menu">
     <ul class="menu-items">
        <li class="menu-item ng-tns-c140-0 ng-star-inserted" >
          <a class="ng-tns-c140-0 ng-star-inserted active" ng-reflect-router-link="/pages/dashboard"   title="Dashboard" href="/pages/dashboard">This is the anchor inside the li</a>
        </li>
     </ul>
  </nb-menu>
</nb-sidebar>

<div class="content">
  <router-outlet>
    <div class="text">Message</div>
  </router-outlet>
</div>

更普遍支持的方法是使用 javascript，它会检测到您将鼠标悬停在元素上，然后添加和删除一个类以覆盖规则，如下所示。下面的代码应该是不言而喻的，但如果您有任何问题，只需在下面发表评论，我会详细说明。display: none

window.onload = () => {
  const elem = document.querySelector('.menu-item');
  elem.addEventListener('mouseover', (e) => {
    document.querySelector('.content router-outlet').classList.add('display-block');
  });

  elem.addEventListener('mouseout', (e) => {
    document.querySelector('.content router-outlet').classList.remove('display-block');
  });
}

router-outlet {
  display: none;
}

.display-block {
  display: block;
}

<nb-sidebar class="menu-sidebar>
  <nb-menu class=" sidebar-menu ">
     <ul class="menu-items ">
        <li class="menu-item ng-tns-c140-0 ng-star-inserted " >
          <a class="ng-tns-c140-0 ng-star-inserted active " ng-reflect-router-link="/pages/dashboard "   title="Dashboard " href="/pages/dashboard ">This is the anchor inside the li</a>
        </li>
     </ul>
  </nb-menu>
</nb-sidebar>

<div class="content ">
  <router-outlet>
    <div class="text ">Message</div>
  </router-outlet>
</div>

1赞 Pete 1/17/2023

我一直忘记了，很好的解决方案:has()

0赞 Adam 1/18/2023

我很高兴的家伙。祝您度过美好的一天:-D

上一个：在 react 的 scss 代码中放入 “ content： ”“ ; ” 后，我的链接停止工作

下一个：即使条件为 true，也不会显示 CSHTML 页面中@if条件内的元素

如何使元素在将另一个部分的元素悬停时可见？

How can I make an element visible on hovering an element from another section?

评论

评论