Warum geht :Hover nicht?

  • Kann mir jemand sagen, warum bei dem folgendem Code mein li a Elemente aus der Nav nicht einen weißen Kasten um sich herrum bekommen wenn ich darüber hover? Also ich habe jetzt tausend mal nachgeguckt und weiß nicht woran es liegt.

    <!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>

  • Der Grund ist, dass dein div.hero die Navigation überdeckt, so dass die Mausaktionen nicht an die a-Elemente gelangen. Kurzfristige Lösung: Dem div.hero ein pointer-events: none; geben, das macht es durchlässig für Mausaktionen.

    Längerfristig gedacht ist es häufig so, dass absolute Positionierung und die damit verbunden Überdeckung die Ursache für Probleme sind, so wie hier. Nach Möglichkeit darauf verzichten.

  • Der Grund ist, dass dein div.hero die Navigation überdeckt, so dass die Mausaktionen nicht an die a-Elemente gelangen. Kurzfristige Lösung: Dem div.hero ein pointer-events: none; geben, das macht es durchlässig für Mausaktionen.

    Längerfristig gedacht ist es häufig so, dass absolute Positionierung und die damit verbunden Überdeckung die Ursache für Probleme sind, so wie hier. Nach Möglichkeit darauf verzichten.

    Hii ich nochmal, ich habe das mit diesem pointer-events: none; gemacht und es ging auch eine Zeit lang, jetzt habe ich aber ein bisschen weiter geübt und habe jetzt das gleiche Problem nur diesmal kann ich meine Buttons aus dem div.hero nicht mehr benutzen :/ ich bin halt noch sehr neu und weiß deswegen auch nicht wie man auf absolute Positionierung verzichtet, weil alles dann iwie ineinander fällt.

  • Schuld daran sind die Positionierungen, wie es ja schon gesagt wurde.

    Das machst du an besten mit Flexbox.

    http://www.css-wiki.com/listings/flexbox.html


    Ich weiß nicht wie das aussehen soll bei dir, deswegen habe ich da jetzt nichts Großartiges gemacht.

    * Link entfernt, weil existiert nicht mehr *


    Mit der Anleitung und dem kleinen Beispiel solltest du es nochmal versuchen.

    Falls du dann nicht weiter kommst, poste bitte deinen aktuellen Code hier in den Codetags ( </> ) oder erstelle wie ich es gemacht habe ein Codepen , dann ist das Helfen einfacher

  • Moin ich nochmal, also ich habe jetzt das mit dem flex probiert (https://codepen.io/Wasguckstdu/pen/abzLaBN) aber jetzt verstehe ich nicht wie ich meine main-nav nach rechts verschiebe (also eigentlich justify-content= flex-end oder?).

  • kannst du mal eine skizze oder Bild erstellen wie das aussehen soll ?

    Man müßte eigentlich noch einige sachen ändern um das "richtig" zu machen.

    positions angaben und float brauch man bei flexbox eigentlich nicht.

  • Zitat

    jetzt verstehe ich nicht wie ich meine main-nav nach rechts verschiebe (also eigentlich justify-content= flex-end oder?).

    justify-content= flex-end ist schon genau richtig, der Grund, warum es nicht funktioniert, ist, dass Du bei dem betr. Element nicht display: flex; gesetzt hast, daher bleibt das justify-content wirkungslos.


    Außerdem geistert da noch ein float herum, das besser löschen.


    Und das div.hero ist immer noch absolut positioniert und hat eine feste Breite.


    Arbeite ich das alles ein, sieht es so aus:

    https://codepen.io/Sempervivum/pen/abzLaYB

    IMO schon viel besser.

  • Ist auch noch nicht perfekt aber kommt schon mal in der nähe

    * Link entfernt, weil existiert nicht mehr *


    Wenn ich deine Angaben sehe ,hast du es wohl auf größeren Bildschirmen angepasst, oder?

    Mit Flexbox und zusätzlichen @mediaqueries könntest du es so anpassen das man es auf allen Bildschirmen gut sehen kann.

    Handys und Tablets kann man damit auch super anpassen.


    Ps:

    Versuch mal beim nächsten Mal deine CSS vernünftig einzurücken.

    Falls du nicht weißt, was ich meine guck dir mal bei codepen deine CSS und meine CSS.

    Meine ist besser lesbar als deine und das behindert deinen Helfer und auch dir selber.


    Du kannst deine CSS auch hier reinkopieren,

    https://www.tutorialspoint.com/online_css_formatter.htm

    dann kommt die da in einen lesbaren Code wieder raus

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!