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

HTML

<nb-sidebar sidebar-menu">
     <ul >
        <li  >
          <a  ng-reflect-router-link="/pages/dashboard"   title="Dashboard" href="/pages/dashboard">
        </li>
     </ul>
  </nb-menu>
</nb-sidebar>

<div >
  <router-outlet>
    <div >Message</div>
  </router-outlet>
</div>

Make router-outlet visible when I hover on li.

I tried like this

router-outlet {
  display: none;
}

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

I want to do it with css/scss only. I want router-outlet to be visible when I hover on li.

CodePudding user response：

In your example because the .content router-outlet element isn't a direct sibling of the li element the Adjacent Sibling Combinator won't work (see MDN for details)

However there's a couple of ways of doing this. The first uses the :has() pseudo class which is neat as it doesn't need any javascript but isn't currently supported on all browsers. There's a nice introduction to this from Kevin Powell. Also caniuse.com is a good resource to check for browser compatibility.

Note: I've added some text on your html to give you something to hover over.

router-outlet {
  display: none;
}

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

<nb-sidebar sidebar-menu">
     <ul >
        <li  >
          <a  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 >
  <router-outlet>
    <div >Message</div>
  </router-outlet>
</div>

The more generally supported way would be to use javascript which detects you mousing over the element then adding and removing a class to override the display: none rule as follows. The code below should be self-evident but if you have any questions just pop a comment below and I'll elaborate.

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  sidebar-menu ">
     <ul >
        <li  >
          <a  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 >
  <router-outlet>
    <div >Message</div>
  </router-outlet>
</div>

CodePudding user response：

You can use jQuery hover() method:

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>

In your code it would be:

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

CodePudding user response：

I think the is incorrect here. Try :

router-outlet {
  display: none;
}

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