why when I hover on element doesn't work?

Question

I have a list I give it a top : -500% to hide it , and when I hover on an other element I give it a top : 100% to show up agian but it doesn't work ? any help please

.nav-bar .top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: -500%;
  left: 0;
  width: 100%;
  background: rgb(238 238 238 / 88%);
  transition: var(--main-transition);
  -webkit-transition: var(--main-transition);
  -moz-transition: var(--main-transition);
  -ms-transition: var(--main-transition);
  -o-transition: var(--main-transition);
}

.icon:hover .top {
  top: 100%;
}

<div class="nav-bar">
  <ul class="top">
    <li><a href="#home">home<span></span></a></li>
    <li><a href="#about">about<span></span></a></li>
    <li><a href="#services">services<span></span></a></li>
    <li><a href="#portfolio">portfolio<span></span></a></li>
    <li><a href="#pricing">pricing<span></span></a></li>
    <li><a href="#experience">experience<span></span></a></li>
  </ul>
</div>
<div class="icon">
  <span></span>
  <span></span>
  <span></span>
</div>

FWIW re your just-deleted question: Let's rename the array to be `friends` (since array variable names should generally be plural), then use `for-of` and guard against numbers: `for (const friend of friends) { if (typeof friend === "string" && friend[0] === "A") { continue; } console.log(friend); }` (Note that you don't need `charAt`, just use indexing.) Or more idiomatically: `for (const friend of friends) { if (typeof friend !== "string" || friend[0] !== "A") { console.log(friend); } }` — T.J. Crowder, Jan 11 '23 at 09:43

Adam · Answer 1 · 2022-12-15T19:16:21.790

.icon:hover .top won't work because the .top div is not a child of the .icon div. You can either put the icon div above the .top div and use the adjacent sibling combinator or use the :has pseudo class (but note this won't work in firefox (yet!)). Note, I've also added some text the spans in the .icon div to give you something to hover over. I've also tweaked the :hover top declaration

W3schools has a good intro to CSS selectors

Using adjacent sibling combinator:

.nav-bar .top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  background: rgb(238 238 238 / 88%);
  transition: top 1s;
}

.icon:hover + .nav-bar .top {
  top: 10%;
}

.icon {
  cursor: pointer;
}

<div class="icon">
  <span>Hover</span>
  <span>Over</span>
  <span>Me</span>
</div>
<div class="nav-bar">
  <ul class="top">
    <li><a href="#home">home<span></span></a></li>
    <li><a href="#about">about<span></span></a></li>
    <li><a href="#services">services<span></span></a></li>
    <li><a href="#portfolio">portfolio<span></span></a></li>
    <li><a href="#pricing">pricing<span></span></a></li>
    <li><a href="#experience">experience<span></span></a></li>
  </ul>
</div>

Using :has() pseudo class

.nav-bar .top {
  display:flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 0;
  background: rgb(238 238 238 / 88%);
  transition: top 0.5s;
}

body:has(.icon:hover) .top {
  top:10%;
}

.icon {
  cursor:pointer;
}

<div class="nav-bar">
  <ul class="top">
    <li><a href="#home">home<span></span></a></li>
    <li><a href="#about">about<span></span></a></li>
    <li><a href="#services">services<span></span></a></li>
    <li><a href="#portfolio">portfolio<span></span></a></li>
    <li><a href="#pricing">pricing<span></span></a></li>
    <li><a href="#experience">experience<span></span></a></li>
  </ul>
</div>
<div class="icon">
  <span>Hover</span>
  <span>Over</span>
  <span>Me</span>
</div>

why when I hover on element doesn't work?

1 Answers1