Hover von links nach Rechts einblenden lassen?

Wie kann man den Hover mit css von links nach Rechts einblenden lassen ?

Also am besten mit webkit-transformation.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

16.07.2016, 13:25

Wenn du es nur mit css lösen möchtest, packst du in deinen zu hovernden div noch ein div mit der selben Höhe rein und erstellst keyframes, um die Breite von 0 auf 100% skalieren zu lassen.

abbrechen

16.07.2016, 13:53

Wobei, vergiss' was ich gesagt habe. Es reicht eine simple transformation, statt der animation-Funktion.

Ich habe dir mal was vorbereitet: http://codepen.io/anon/pen/EyoAgJ

Jegor

Beitragsersteller

16.07.2016, 15:28

@abbrechen

Danke, mit dem zweiten wollte ich auch arbeiten.

Mein Quelltext sieht ungefähr so aus: https://jsfiddle.net/qm2p4Lv5/

Doch der Hover funktioniert nicht.

abbrechen

16.07.2016, 15:56

So klappt es: https://jsfiddle.net/qm2p4Lv5/1/

abbrechen

16.07.2016, 15:55

Du hast auch im css angeben, dass das child div von .auflistung sich verändern soll, obwohl "test" kein div hat, sondern die Listenpunkte darunter.

TanteHolger

15.07.2016, 20:20

Hi,

schau Dir mal diese beiden Funktionen von jQuery an.
https://api.jquery.com/animate/
https://api.jquery.com/hover/

Ähnliche Beiträge

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

...zum Beitrag

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?

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zum Beitrag

Text auf Webseite einblenden lassen?

Hi wie kann man Texte auf einer Webseite einblenden lassen sobald man auf die webseite kommt. Also ohne hover oder drauf klicken, sondern das es das automatisch macht

...zum Beitrag

Wie kann ich bei diesem Icon die Farbe ändern in CSS 3?

Ich möchte die Farbe ändern aber es funktioniert nicht mit hover, visited, link usw. Hat jemand eine Idee? P.S. das Icon ist von Fontawesome. Mit der Frage meine ich die Lupe am rechten Rand.

...zum Beitrag

Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?

Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <style>
        .box {
            position: relative;
            margin-top: 50px;
            width: 200px;
            height: 75px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Ubuntu';
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }
        .box:hover {
            color: white;
        }


        .box::after{
            position: absolute;
            left: 0;
            content: '';
            background-color: lightgreen;
            width: 0;
            height: 75px;
            border-radius: 11px;
            transition: all 0.5s ease-in-out;
            z-index: 0;
        }
        .box:hover::after{
            width: 200px;
        }



    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>

...zum Beitrag

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

HTML / CSS Bilder bei hover für 5 Sekunden anzeigen?

Wenn ich über Bild "A" Hover will ich, dass bild "B" für 5 Sekunden angezeigt wird und wieder verschwindet. Aber wenn Bild "B" für 5 Sekunden sichtbar ist soll man da drüber hovern und dann sieht man Bild "C" für 5 Sekunden :D Geht das irgendwie ? Wenn ja -> HOW?

...zum Beitrag

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 :)

...zum Beitrag

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.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen