Foren
Neue Beiträge
Foren durchsuchen
Was ist neu?
Neue Beiträge
Profilnachrichten
Online
Anmelden
Registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Neue Beiträge
Foren durchsuchen
Menü
Anmelden
Registrieren
App installieren
Installieren
Programmierung
CSS
Warum geht :Hover nicht?
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Auf Thema antworten
Beitrag
[QUOTE="luca_luca, post: 8285, member: 1784"] Kann mir jemand sagen warum im folgenden Code meine li a Elemente aus dem Header nicht mit einer weißen Linie versehen werden wenn ich drüber hover? <!DOCTYPE html> <html> <head> <title>Test-Website</title> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <style> * {margin: 0; padding: 0;} header{background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(pic1.jpg); height: 100vh; background-size: cover; background-position: center; background-attachment: fixed;} .main-nav{float: right; list-style: none; margin-top: 30px;} .main-nav li{display: inline-block;} .main-nav li a{color: white; text-decoration: none; padding: 5px 20px; font-family: "Roboto", sans-serif; font-size: 25px;} .main-nav li.active a{border: 1px solid white;} .main-nav li a:hover{border: 1px solid white;} .logo img{width: 150px; height: auto; float: left;} body{ font-family: monospace;} .row{max-width: 1500px; margin: auto;} .hero{position: absolute; width: 1900px; margin-left: 0; margin-top: 0;} h1{color:white;text-transform: uppercase; font-size: 70px; text-align: center; margin-top: 275px;} .button{margin-top: 30px;margin-left:782px;} .btn{border: 1px solid white; padding: 10px 30px; color:white; text-decoration: none; margin-right: 5px; font-size: 25px; text-transform: uppercase;} .btn-one{background-color: darkorange; font-family: "roboto", sans-serif;} .btn-two{font-family: "Roboto", sans-serif;} .btn-two:hover{background-color:darkorange; transition: all 0.5s ease-in;} .about{height: 100vh;} </style> </head> <body> <!--HEADER--> <header> <!--NAVIGATION--> <div class="row"> <div class="logo"><img src="logo.png" alt="Logo"></div> <ul class="main-nav"> <li class="active"><a href="#">HOME</a></li> <li><a href="google.com">ABOUT</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">EXERCISES</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <!--MESSAGE--> <div class="hero"><h1>Are You Ready?</h1><div class="button"><a href="#" class="btn btn-one">Continue</a><a href="#" class="btn btn-two">Quit</a></div></div> </header> <!--ABOUT--> <section class="about"><h2>Hallo dies ist ein Test</h2></section> </body> </html> [/QUOTE]
Zitate
Authentifizierung
Antworten
Programmierung
CSS
Warum geht :Hover nicht?
Oben
Unten
