Is possible with CSS or with jQuery?

Rismo 0
Viewed 43

I need your help with a small question. I will wish that when I hover over a #div element, another element changes to CSS. Is it possible ?

I give you an example below

li.menu-sub-item {
  display: none;
}

/* Here I don't know how do this but */

/* When I hover on .menu-item */
li.menu-item:hover {
/* .menu-sub-item will be display */
  li.menu-sub-item {
  display: block;
  }
}
<div class="menu-main-menu">
  <li class="menu-item">
    <a href="https://www.test.com">Home</a>
    <ul class="sub-menu">
      <li class="menu-sub-item"></li>
      <a href="https://www.test.com">Profil</a>
    </ul>
  </li>
</div>

Thx in advance !

jquery css
1 Answers

You can use + or ~ CSS selector with a tag and then join ul.sub-menu with it.

so it can be write like this li.menu-item a:hover+ul.sub-menu

You can read more about CSS selectors here https://www.w3schools.com/cssref/css_selectors.asp

/* Hide submenu by default */

ul.sub-menu {
  display: none;
}


/* Show menu when prev relative a hovers */

li.menu-item a:hover+ul.sub-menu {
  display: block;
}
<div class="menu-main-menu">
  <li class="menu-item">
    <a href="https://www.test.com">Home</a>
    <ul class="sub-menu">
      <li class="menu-sub-item">
        <a href="https://www.test.com">Profil</a>
      </li>
    </ul>
  </li>
</div>

Vijay Hardaha0
Related