CSS: Nie działający hover

0

Cześć,
nie wiem czemu nie chce mi działać hover, dopiero się uczę css i html'a, więc nie potrafię dostrzec błędu ;p

<body>
    <div class="container">
        <div class="menu">
            <ul>
                <li><a class="a" href="#">O nas</a></li>
                <li><a class="a" href="#">Oferta podróży</a></li>
                <li><a class="a" href="#">WAKACJE 2018</a></li>
                <li><a class="a" href="#">Opinie</a></li>
                <li><a class="a" href="#">Kontakt</a></li>
            </ul>
        </div>
    </div>
</body>


</html>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: aqua;
}

.menu ul {
    list-style-type: none;
    overflow: hidden;
    background-color: white;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    width: 100%;
    font-family: 'Hammersmith One', sans-serif;
    border-bottom: 3px solid black;
}

.a {
    float: left;
    text-decoration: none;
    color: black;
    display: block;
    text-align: center;
    padding: 23px 34px;
    font-size: 30px;
    background-color: white;
}

.a: hover {
    display: block;
    background-color: aqua;
}

3

:hover bez spacji.

0

Acha, na przyszłość możesz wrzucać kod np. do https://jsfiddle.net/ – mnie tam od razu podkreśliło na czerwono odpowiednie miejsce. :)

0
Patryk27 napisał(a):

:hover bez spacji.

dzięki :D

0

A wiecie może dlaczego nie chce mi zrobić border-right "przycisku" w menu i dlaczego jak dodam obramowanie to rusza mi się całe menu?

0

i koliduje mi chyba kolor czarny ramki z kolorem hovera

0

No dobrze, już ja to wrzuciłem ;), ale teraz proszę, korzystaj z tego: https://jsfiddle.net/1osh250y/7/

A wiecie może dlaczego nie chce mi zrobić border-right "przycisku" w menu

Przycisku – masz na myśli <li>? Najpewniej dlatego, że na <a> masz ustawiony float. Nie wiem, czy powinien się tam znaleźć. Przy okazji: używaj z rozwagą float, display oraz position.

dlaczego jak dodam obramowanie to rusza mi się całe menu?

Rozumiem, że obramowanie dodaje w hover? Ponieważ obramowanie ma szerokość, więc jest ona dodawana.

i koliduje mi chyba kolor czarny ramki z kolorem hovera

Nie rozumiem.

0
Uczynny Samiec napisał(a):

dlaczego jak dodam obramowanie to rusza mi się całe menu?

Bo element po dodaniu obramowania staje się szerszy. Zamiast dynamicznie włączać/wyłączać obramowanie możesz przełączać się między transparent a innym kolorem, wtedy nie będzie tego efektu.

0
Silv napisał(a):

No dobrze, już ja to wrzuciłem ;), ale teraz proszę, korzystaj z tego: https://jsfiddle.net/1osh250y/7/

A wiecie może dlaczego nie chce mi zrobić border-right "przycisku" w menu

Przycisku – masz na myśli <li>? Najpewniej dlatego, że na <a> masz ustawiony float. Nie wiem, czy powinien się tam znaleźć. Przy okazji: używaj z rozwagą float, display oraz position.

dlaczego jak dodam obramowanie to rusza mi się całe menu?

Rozumiem, że obramowanie dodaje w hover? Ponieważ obramowanie ma szerokość, więc jest ona dodawana.

i koliduje mi chyba kolor czarny ramki z kolorem hovera

Nie rozumiem.

Zapomniałem średnika i już jest obramowanie po prawej stronie :p tylko wlasnie mi sie rusza i co mam z tym zrobić?
No bo jak najeżdzam na "przycisk" w menu myszką to tylko pokazuje mi sie obramowanie a nie jeszcze kolor

0
Uczynny Samiec napisał(a):
Silv napisał(a):

No dobrze, już ja to wrzuciłem ;), ale teraz proszę, korzystaj z tego: https://jsfiddle.net/1osh250y/7/

A wiecie może dlaczego nie chce mi zrobić border-right "przycisku" w menu

Przycisku – masz na myśli <li>? Najpewniej dlatego, że na <a> masz ustawiony float. Nie wiem, czy powinien się tam znaleźć. Przy okazji: używaj z rozwagą float, display oraz position.

dlaczego jak dodam obramowanie to rusza mi się całe menu?

Rozumiem, że obramowanie dodaje w hover? Ponieważ obramowanie ma szerokość, więc jest ona dodawana.

i koliduje mi chyba kolor czarny ramki z kolorem hovera

Nie rozumiem.

Zapomniałem średnika i już jest obramowanie po prawej stronie :p tylko wlasnie mi sie rusza i co mam z tym zrobić?
No bo jak najeżdzam na "przycisk" w menu myszką to tylko pokazuje mi sie obramowanie a nie jeszcze kolor
jak zapisac zmiany w tym jsfiddle?

0

tylko wlasnie mi sie rusza i co mam z tym zrobić?

Nie jest to ironia, ale: nie dodawać obramowania przy najechaniu myszą. Wydaje mi się to niestandardowe. Jeśli koniecznie chcesz ramkę, to możesz albo:

  • zmiejszyć wysokość i szerokość danego elementu, ale to pewnie się u Ciebie nie uda, więc lepiej
  • ustawić mu ujemny margines, jak tu podane: https://stackoverflow.com/a/9612787 (nie wiem, czy zawsze zadziała, nie próbowałem).

jak zapisac zmiany w tym jsfiddle?

Naciskasz "Update" i zmienia Ci się adres – ostatni człon, czyli numerek, powiększa się. Gdy naciśniesz "Fork", tworzy Ci się nowy adres (bez numerku wersji). Gdy w URL-u nie masz żadnego identyfikatora (np. wchodzisz na adres https://jsfiddle.net/), zamiast przycisku "Update" jest "Save" i dopiero po jego naciśnięciu pojawia się identyfikator (czyli tworzy się "fiddle").

1 użytkowników online, w tym zalogowanych: 0, gości: 1