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

bf1o4zei 于 2023-01-18 发布在其他

关注(0)|答案(3)|浏览(272)

超文本标记语言

<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>

当我将鼠标悬停在li上时，使router-outlet可见。
我试过这样

router-outlet {
  display: none;
}

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

我只想用css/scss来做。我想当我悬停在li上时router-outlet是可见的。

css

来源：https://stackoverflow.com/questions/75147793/how-can-i-make-an-element-visible-on-hovering-an-element-from-another-section

3条答案

按热度按时间

vdzxcuhz1#

在您的示例中，因为.content router-outlet元素不是li元素的直接同级元素，所以相邻同级组合器将不起作用（有关详细信息，请参阅MDN）
不过有几种方法可以做到这一点。第一种使用:has()pseudo class，它很简洁，因为它不需要任何javascript，但目前并不是所有浏览器都支持它。Kevin Powell有一个nice introduction。此外，caniuse.com是检查浏览器兼容性的一个很好的资源。
注意：我在你的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规则，如下所示，下面的代码应该是不言自明的，但是如果你有任何问题，只要在下面弹出一个评论，我会详细说明。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-01-18

k4emjkb12#

您可以使用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");});
  });

赞(0）回复(0）举报 2023-01-18

vm0i2vca3#

我认为此处的+不正确。请尝试：

router-outlet {
  display: none;
}

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

赞(0）回复(0）举报 2023-01-18

我来回答

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

3条答案

相关问题

热门标签

最新问答