• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS . Właściwość cursor: pointer;

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+2 głosów
779 wizyt
pytanie zadane 22 lutego 2021 w HTML i CSS przez Darek Kurc Nowicjusz (190 p.)
edycja 22 lutego 2021 przez Darek Kurc

Cześć mam problem w CSS z właściwością cursor. Mam wpisane w button cursor:pointer. Pointer po najechaniu się nie pojawia. W elemencie nadrzędnym mam z-index:-1 , którego potrzebuje. Jeśli go usunę to nagle cursor działa. Jak poradzić sobie z tym poblemem ?
 

<header>
            <div class="heading">
                <button>Zainspiruj się</button>
            </div>
        </header>
<section class="newest">
            <h1>#najnowsze wpisy</h1>
            <div class="articles">
            <div class="article">
                <div><img src="" alt=""></div>
                <h2>Tytuł artykułu</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem facere voluptatibus delectus quam voluptate, sunt fugiat repudiandae numquam voluptatum, optio aperiam dolor. Consequatur minima quaerat tenetur atque, culpa laudantium repudiandae!</p>
                <button><p>Czytaj dalej</p></button>
                <p class="date">10 grudnia 2021</p>
            </div>
            <div class="article">
                <div><img src="" alt=""></div>
                <h2>Tytuł artykułu</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem facere voluptatibus delectus quam voluptate, sunt fugiat repudiandae numquam voluptatum, optio aperiam dolor. Consequatur minima quaerat tenetur atque, culpa laudantium repudiandae!</p>
                <button><p>Czytaj dalej</p></button>
                <p class="date">10 grudnia 2021</p>
            </div>
            <div class="article">
                <div><img src="" alt=""></div>
                <h2>Tytuł artykułu</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati expedita asperiores ipsam autem dignissimos neque possimus laboriosam, repellat id, recusandae doloribus cum assumenda? Veniam eligendi, at explicabo quaerat error ad.</p>
                <button><p>Czytaj dalej</p></button>
                <p class="date">10 grudnia 2021</p>
            </div>
            </div>
        </section>


header {
    position: relative;
    margin-top: calc(17vh + 51px);
    height: 72vh;
    background-image: url(images/BG1.jpg);
    background-position: center 70px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: -1;
}

header .heading button {
    padding: 25px 50px;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 60%;
    border: 2px solid #6b5b95;
    cursor: pointer;

}

 

.newest {
    width: 80%;
    margin: 0 auto;
    margin-top: -50px;
    background-color: #fff;
    z-index: 5;
}

Z góry dziękuję za pomoc :)

komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)
Możesz dodać kod HTML, żeby można było to przetestować?
komentarz 22 lutego 2021 przez Darek Kurc Nowicjusz (190 p.)
Dodane :D
komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

A czy możesz podać szerszy kontekst, gdzie ten element z przyciskiem jest umieszczony i dlaczego potrzebujesz mieć ujemny z-index na parencie przycisku? Jeśli potrzebujesz mieć tło pod przyciskiem, to może ułóż te elementy w HTML-u w relacji rodzeństwa i nanieś (przesuń), za pomocą pozycjonowania, przycisk na tło (które będzie w osi Z pod przyciskiem)?

komentarz 22 lutego 2021 przez Darek Kurc Nowicjusz (190 p.)
Potrzebuje tę sekcję o klasie .newest tak jakby narzucić trochę na header (zrobiłem to za pomocą ujemnej wartości we właściwości margin-top) żeby białe tło sekcji przykrywało background-image headera. Stąd z-index:-1 dla Header.
komentarz 23 lutego 2021 przez krissto7 Gaduła (3,100 p.)
Mi osobiście jak dorzuciłem tam .newest button {
  cursor: pointer;
} to wszystko działa , ale cieżko ocenić o co Ci chodzi skoro nie wrzucasz całego kodu htmla i styli... przecież problem może wynikać z różnych powodów... Następnym razem wstaw na codepen cały kod aby móc to przetestować...
komentarz 23 lutego 2021 przez Darek Kurc Nowicjusz (190 p.)
Załączam już cały kod z tym "buttonem" w headerze , który ma być cał klikalny. Zamieniłem button na diva w ktorym jest a.

DOrzuciłem jakąś grafike zeby bylo wiadomo o co chodzi już dokładnie.

 

Link do kodu:

https://codepen.io/Darensi/pen/GRNOjGZ

3 odpowiedzi

+2 głosów
odpowiedź 23 lutego 2021 przez krissto7 Gaduła (3,100 p.)
Może nie tyle co kompromis pomiędzy z-index , a cursorem , problem występuje kiedy dodatkowo dodajesz position , usuń position:relative z headera to wszystko ładnie śmiga , w twoim kodzie to raczej niczego nie zmienia , a jeśli by zmieniało to można inaczej ułożyć kod. Dodatkowo dodam , że jak tak zostawisz jak masz to nawet nie działają żadne zdarzenia poprzez js , wszelkie najechania , kliknięcia są niemożliwe... Dlaczego tak się dzieje to z chęcią sam chciałbym usłyszeć 'fachową' rade.
1
komentarz 23 lutego 2021 przez VBService Ekspert (255,840 p.)

Z tym usuwaniem position, to nie tak szybko, bo  wink

CSS z-index Property

 

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

 

Note: 

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

1
komentarz 23 lutego 2021 przez niezalogowany

@krissto7,

ups laugh

komentarz 23 lutego 2021 przez VBService Ekspert (255,840 p.)

Wszyscy się uczymy, ... ciągle, ... Ja też.  wink

1
komentarz 23 lutego 2021 przez niezalogowany

Widzę laugh ....Btw good jobyeswink

1
komentarz 23 lutego 2021 przez krissto7 Gaduła (3,100 p.)

@VBService, Nawet o tym nie pomyślałem , a to w sumie raczej logiczne :D Mimo wszystko warto udzielać się i czytać takie posty odnośnie problemów w cssie/jsie bo przynajmniej samemu będę na przyszłość mądrzejszy i się zawsze czegoś nauczę...

+1 głos
odpowiedź 23 lutego 2021 przez VBService Ekspert (255,840 p.)
edycja 23 lutego 2021 przez VBService

To jest problem z:  wink

problem with cursor css when z-index is less 0

i także wtedy jest problem jak wspomniał @krissto7  (to na czerwono podkreślone)

Moja propozycja ratunku:

nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99; /*  jakis wysoki */
    background-color: #fff;
}
header {
    position: relative;
    margin-top: calc(17vh + 51px);
    height: 72vh;
    background-image: url(https://cdn.pixabay.com/photo/2021/01/13/22/50/waterford-5915361_960_720.jpg);
    background-position: center 70px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 0; /* zero */
}
.newest {
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: -50px;
    background-color: #fff;
    z-index: 2; /* wiekszy od header, mniejszy od nav  .;-) */
}

Moja prywatna opinia, u Mnie z-index: < 0 sprawdza się, gdy umieszczam w background strony wideo.  wink

komentarz 27 lutego 2021 przez Darek Kurc Nowicjusz (190 p.)

Cześć, w przypadku wprowadzenia zaproponowanych zmian niestety nadal sekcja .newest jest pod schowana pod headerem. :( 

 

Czy mógłym przy okazji prosićo jakieś proste wyjaśnienie Twojego komentarza odnośnie Z-index ? aby go nie usuwać ? może to nieść za sobą jakieś negatywne konsekwencje ?

Chodzi mi o ten fragment ,kóry zamieszczałeś w innym komentarzu :

 

"CSS z-index Property

 

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

 

Note: 

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky)."

Zauważyłem, że po usunięciu 
position:relative z headera to wszystko ładnie śmiga tak jak napisał krissto7.

Pozdrawiam i czekam na odpowiedzi :) 


 

komentarz 28 lutego 2021 przez VBService Ekspert (255,840 p.)
edycja 28 lutego 2021 przez VBService

Bo jak jest napisane: 

Indeks z działa tylko na elementach pozycjonowanych (pozycja: bezwzględna, pozycja: względna, pozycja: ustalona lub pozycja: "przyklejona"). 

czyli z-index tylko wtedy działa gdy na tym samym elemencie ustawiony jest jakiś position. Usuwając position: relative z headera, przeglądarka domyślnie ustawia z-index wtedy na zero. (z-index: 0), czyli najniższa warstwa na stronie, ale nie ujemna.

1
komentarz 28 lutego 2021 przez Darek Kurc Nowicjusz (190 p.)
Ok, rozumiem, dzięki :)
0 głosów
odpowiedź 23 lutego 2021 przez niezalogowany

Wygląda na to że kompromis pomiędzy tymi  dwoma elementami (z-index vs cursor) w tym przypadku jest maksymalnie utrudniony,a nawet niemożliwy... (Istnieje taki pogląd że nie ma rzeczy niemożliwych laugh więc poczekaj możne reszta załogi forum coś wymyśli..Jest tutaj wielu Bystrych, inteligentnych, kreatywnych "magików"...)

https://stackoverflow.com/questions/18434626/why-is-cursorpointer-effect-in-css-not-working/18434670

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Możesz wejść w devtools przeglądarki  i pobawić się wysokościąwink elementu "header"(ta wskazówka będzie przydatna TYLKO jeśli możesz zmienić wysokość tego elementu w kontekście całego projektu ...) 

Powodzenia winkyes

Podobne pytania

0 głosów
1 odpowiedź 350 wizyt
pytanie zadane 29 czerwca 2018 w HTML i CSS przez nowakos Nowicjusz (140 p.)
0 głosów
1 odpowiedź 122 wizyt
pytanie zadane 1 kwietnia 2020 w HTML i CSS przez auaauaaua Początkujący (370 p.)
0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 15 grudnia 2019 w C i C++ przez user124 Nowicjusz (210 p.)

93,100 zapytań

142,064 odpowiedzi

321,524 komentarzy

62,442 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...