CSS Hover Animation "einmalig"?

Hallo, ich möchte eine :hover transition so einstellen, dass wenn sie einmal getriggert wurde nicht mehr gestoppt wird einfach bis zum Ende läuft und dann so bleibt. Wie realisiere ich das am einfachsten? LG

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Tyldu

26.09.2019, 15:37

nur mit css schwierig bis unmöglich.

mit javascript machst du einfach eine css klasse die den veränderten style beinhaltet und fügst diese dann dem element hinzu wenn man darüber hovert:

https://jsfiddle.net/ufdnm0te/1/

Woher ich das weiß:Studium / Ausbildung – Softwareentwickler, B. Sc. Informatik

Nic0LP

Fragesteller

26.09.2019, 16:11

alles klar, js is auch kein problem, danke.

Nic0LP

Fragesteller

26.09.2019, 18:46

@Nic0LP

Hi, bei mir kommt folgende Fehlermeldung in der Konsole:

TypeError: null is not an object (evaluating 'div.onmouseover = () => {

div.classList.add("hovered");

Wenn ich eine generelles Element hinschreibe ("div)", ("nav") etc. kommt keine Fehlermeldung, wenn ich es aber mit einer id oder einer class versuche ("#exempleDiv"), (".exempleClass") gibt die Konsole die oben geschriebene Fehlermeldung aus. Bei document.getElementById passiert das gleiche... weißt du zufällig was ich falsch mache?

Ist dabei übrigens egal ob ich ein div mit Text oder ein Bild ansteuer'

Tyldu

26.09.2019, 18:51

@Nic0LP

mein tipp wären jetz typos. sollte eigentlich auch so kein problem sein. bei getElementById darfst du auch kein # vor den namen machen wenn ich das richtig im kopf hab. selbiges gilt für getElementsByClassName, hier aber mit dem "." vor dem klassennamen. da bekommst du außerdem ein array von elementen, musst du also über einen index ansprechen.

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

26.09.2019, 15:36

Hallo, ich möchte eine :hover transition so einstellen, dass wenn sie einmal getriggert wurde nicht mehr gestoppt wird einfach bis zum Ende läuft und dann so bleibt

Das geht mit CSS alleine nicht. Dazu musst Du mit Javascript eine Animation erstellen und diese mit dem eventhandler onmouseover starten.

Alex

Nic0LP

Fragesteller

26.09.2019, 16:11

danke dir!

Ähnliche Fragen

CSS, mehrere Transitions?

Hallo, wie kann ich, wenn ich einen Button habe, auf dem ich die Opacity in der Pseudoklasse Hover in einer Transition von 2ms ändern möchte, die Opacity von der Pseudoklasse Active in einer anderen Transitionzeit ändern? Wenn ich transition: opacity 2ms schreibe, wird das sowohl für hover als auch active angewendet, aber ich möchte jeweils unterschiedliche Transitionzeiten haben. Also auf active z.B. 1ms. Ich kann die Transition auch nicht in die jeweilige Pseudoklasse schreiben, da die Transition aufhört, sobald man beispielsweise vom Button runterhovert.

...zur Frage

Gehen CSS-Animationen auch rückwärts nach Hover?

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zur Frage

Jquery: If hover mache "das", wen nicht mehr hover dan "das"

Guten Morgen Gutefrage.net, erstmal mein Code:

$(".leistungen").hover(function(){ $( ".technik" ).animate({ marginTop: "+=62", height: "toggle" }, 5000, function() { // Animation complete. });

});

Wie kann ich sagen das er nur einmal bei einem hover den div "technik" auf margin-top 62px einstellen soll? Und das er wen nicht mehr gehovert wird wieder zurückgehen soll?

Und dan natürlich wieder bei einem erneuten hover das ganze nochmal usw.

MfG

Matrix

...zur Frage

CSS Animation von Oben nach Unten durchlaufen lassen?

Hallo liebe Forumleser :)

Ich würde gerne einen Text von Oben nach Unten durchlaufen lassen :), am besten mit CSS - da Marquee nicht mehr Aktuell ist.

Ich bin noch Anfänger was CSS angeht :)

Ich habe es bisher geschafft den Text vom gewünschten Platz von Oben nach Unten laufen zu lassen, jedoch läuft der Text nicht DURCH sondern setzt sich (wenn das erste Wort den Endpunkt erreicht hat) wieder auf den Startpunkt zurück. Wie verhindere ich das zurücksetzen und mache ein Durchlaufen daraus?

Dankeschön an alle.

Schöne Woche noch!

.object {
    animation: MoveUpDown 5s linear infinite;
    position: absolute;
    left: 0;
    bottom: 0;
}
@keyframes MoveUpDown { 0% { bottom: 70%; } 100% { bottom: 20%; }

...zur Frage

CSS hover Effekte sollen nach aktivien bleiben?

Ich habe z.B. einen div-Container und mache einen hover-Effekt, dass er breiter wird. Jetzt will ich, dass dies so bleibt, bis man die Seite halt neu lädt. Geht das nur mir CSS oder braucht man JS? Danke im Voraus :)

...zur Frage

HTML / CSS Transition funktioniert nicht?

Hallo,

wie man oben lesen kann funktioniert die Verzögerung eines hover Effekts nicht. Egal was ich probiere der hover Effekt hat keine Verzögerung. Hier der Code, der verzögert sein soll:

{ width: 339px; height: 191px;

position:absolute;
z-index:13;
right: 65%;
bottom: 225px;
position: fixed;
background-image: url(../Bilder/C-ProgrammUn.png);

} #C:hover { background-image: url(../Bilder/C-Programm.png); }

Sorry falls unübersichtlich ist, GuteFrageNet matscht das leider.

Kann mir wer helfen? :D

Mfg TOminerTV

...zur Frage

Animation erstellen - Bild zuerst mittig, anschließend "fließt" Text heraus?

Hallo Community, ich denke ihr habt am Titel schon ungefähr gelesen worum es geht. Ich möchte gerne eine Animation erstellen. Am besten eine per CSS, damit ich sie in allen Webseiten verwenden kann. In der Animation soll zuerst mein Logo (also ein Bild) zusehen sein. Anschließend rückt das Bild ein Stück nach Rechts und nach Links hin "fließt" ein Text neben dem Bild ein. Es soll dann letztendlich "Producted by [Bild]" dastehen.

Wie mache ich das? Die Animation soll nur beim mit der Maus drüber schweben angezeigt werden! Also wie :hover bei CSS.

Viele Grüße!

...zur Frage

Css Animation bleibt nicht so am ende wie gewünscht?

Warum resettet sich das immer zurück auf width 10% obwohl ich immernoch den Focus auf dem Element #i habe

#i{
    width: 10%;
}
#i:focus{
    animation: tap 2s;
}
@keyframes tap {
    from{width:10%}
    to{width: 20%;}
}
<input type="text" id="i">

Also das soll ein input feld sein das dann halt bisschen breiter werden soll wenn man draufklickt.

Und wenn man es verlässt soll es wieder auf den normalzustand.

...zur Frage

mit :hover Text hervorheben?

Hi, ich will, dass zum Beispiel ein Link, wenn man über ihn fährt mit der maus größer und unterstrichen wird. Das geht ja zum Beispeil mit

a:hover {
  text-decoration: underline;
  font-size: 200%;
}

Das funktioniert auch gut, ich will aber dass dabei eine kleine Animation passiert. Der Strich soll sich von links nach rechts "aufbauen" und die Schrift soll langsam größer werden. Wie kann man das mit nur css machen?

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

...zur Frage

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zur Frage

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

...zur Frage

Bild beim hover in den Vordergrund?

Guten Abend!Ich habe ein Problem, und zwar programmiere ich gerade eine Website, wenn ich über ein Bild fahre, wird es größer, soweit so gut, doch ich möchte das dieses Bilder vor den anderen Bildern steht. (wenn möglich ohne jquery)

css:.bild:hover{-webkit-transform:scale(1.2);transform:scale(2);}.bild {-webkit-transition: all 0.7s ease;transition: all 0.7s ease; }Ich würde mich sehr über eine Antwort freuen!Danke im Vorraus

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen