vertraging bij verlaten hover

Door Jan R op 12-03-2022 10:52

3.717 views

Hoi

Ik werk al jaren met css hover voor lijn menu's Maar zou een vertraging willen bij het verlaten. Sommige gebruikers bewegen nogal slecht met hun muis en zodra de muis de tag verlaat is het menu weg. Als ik nu een vertraging van een (halve) seconden zou hebben dan zou het beter zijn.

Ik heb dit geprobeerd maar alles loopt nog steeds onmiddellijk.
bron: https://stackoverflow.com/questions/9393125/delay-mouseout-hover-with-css3-transitions


nav li {
    transition: .5s all;  
    transition-delay: 5s;
}
nav li:hover {
    transition-delay: 0s;
}

Jan

Jan R

15-03-2022 10:40

Iemand?

Ozzie PHP

15-03-2022 11:25

Op dit moment geef je alleen aan hoe lang een animatie moet duren.

Je moet de oplossing zoeken in javascript ... het makkelijkst is jQuery.

Je zet een event listener op (de container div van) het menu. Bij een mouse out zet je na x seconden 'display' (css) op 'none', of je doet een fade-out.

? Onbekende gebruiker

15-03-2022 11:27

Volgens mij werkt het gewoon. Even een testje gedaan:

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        text-decoration: none;
        background-image: linear-gradient(to right, red 0%, green 100%);
        background-size: 100% 3px;
        background-repeat: no-repeat;
        background-position: bottom;
        transition: .5s all;  
        transition-delay: 2s;
      }
      a:hover {
        background-position: top;
        transition-delay: 0s;
      } 
    </style>
  </head>
  <body>
    <a href="#">test</a>
  </body>
</html>

Jan R

17-03-2022 11:35

Hi

Ik heb de code geprobeerd en de "animatie" is hier wel zichtbaar echter met een submenu (display:block en display:hide) krijg ik het niet werkende.

Ik heb ook geprobeerd om te werken via animation lukt echter ook niet. js wel maar zoals ik schreef zou ik een pure css oplossing willen.

in volgende fiddle staan de 3 voorbeelden de uitwerking van "Ad Fundum" + zijn voorbeeld en een werken js voorbeeld.
https://jsfiddle.net/36mu92hx/

Let niet op de tijden die staan hoog en moeten op termijn naar 200-500ms gaan. 't is nu maar om te testen en dan wil ik het traag zien :)

Jan

Ozzie PHP

17-03-2022 12:42

>> js wel maar zoals ik schreef zou ik een pure css oplossing willen.

Waarom zou je dat willen als js prima werkt? Js is bedoeld voor interactie en dit is een interactie vraagstuk. Er vindt een bepaalde interactie plaats tussen de gebruiker en de website: de gebruiker beweegt z'n muis buiten het menu en er moet even gewacht worden alvorens het menu wordt gesloten.

Hoe dan ook ik heb even wat speurwerk verricht en heb deze link gevonden. Wellicht kun je hier iets mee. Dit is enkel met css. Of het in alle situaties goed werkt, geen idee ... maar wellicht kun je er iets mee.

https://codepen.io/paulobrien/pen/JjGGdRz

(gevonden via https://www.sitepoint.com/community/t/having-menu-visible-for-x-number-of-seconds-after-hover-has-been-removed/353690/5)

? Onbekende gebruiker

18-03-2022 03:25

JavaScript is inmiddels natuurlijk wel iets meer dan alleen een tool voor interactie.

CSS heeft een complete animatie-module, en het is zonde om dat wiel opnieuw in JS uit te vinden, waarbij het ook nog eens trager werkt dan puur CSS. Daarom zeg ik: CSS eerst, tenzij.
Een demo ter inspiratie wat je met puur CSS kan doen: https://www.cssplay.co.uk/menu/cssplay-tic-tac-toe-v3.html

Op diezelfde site staan ook massa's voorbeelden van CSS menu's, je kan de broncode bekijken en er je voordeel mee doen:
https://www.cssplay.co.uk/menus/

Ozzie PHP

18-03-2022 13:13

@Ad Fundum

Wellicht handig als je dan even kunt aangeven waar de oplossing staat voor de specifieke vraag van de topic starter.

Jan R

18-03-2022 18:36

Allen bedankt voor de hulp

? Onbekende gebruiker

18-03-2022 21:49

Het is niet helemaal hetzelfde, maar met zoiets als dit heb je al een vertraging:


<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, div, nav {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      html, body {
        background: darkgray;
        font-family: Arial, Helvetica, sans-serif;
      
      }
      ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-block;
      }
      nav {
        background: gray;
      }
      .dropdown {
        --hoogte: 40px;
        diplay: block;
        position: relative;
        height: var(--hoogte);
        line-height: var(--hoogte);
        font-size: 16px;
        padding: 0 1em;
        color: yellow;
      }
      .dropdown a {text-decoration: none;}
      .dropdown li {position: relative;}
      .dropContent {
        position: absolute;
        left: 0;
        visibility: hidden;
        background: yellow;
        opacity: 0;
        top: var(--hoogte);
        text-align: center;
        transition: opacity 0, visibility 0;
        transition-delay: 500ms;

      }
      .dropdown li:hover .dropContent {
        visibility: visible;
        opacity: 1;
        transition: opacity 1, visibility 1;
        transition-delay: 0s;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="dropdown">
        <li><a class="dropbtn" href="#">Dropdown 1</a>
          <ul class="dropContent">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li><a class="dropbtn" href="#">Dropdown 1</a>
          <ul class="dropContent">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

Als je meer visuele effecten wil kan je nog animeren met max-height op de dropdown menuutjes, al dan niet in combinatie met transform: translateY(..), etc.

J Jan te Pas

22-03-2022 20:47

Heb jij al een een animation geprobeerd? Kun je ook iets anders in zetten…Voorbeeld:


.dikke:hover{
transform: rotate(5deg);
}

.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Reageren

Inloggen om te reageren