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

Question

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

Comments

Możesz dodać kod HTML, żeby można było to przetestować?

---

Dodane :D

---

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

---

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.

---

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ć...

---

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

Answer 1

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.

Comments

Z tym usuwaniem position, to nie tak szybko, bo  

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

---

@krissto7,

ups

---

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

---

Widzę ....Btw good job

---

@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ę...

Answer 2

To jest problem z:  

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.  

Comments

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

 

---

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.

---

Ok, rozumiem, dzięki :)

Answer 3

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 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ą elementu "header"(ta wskazówka będzie przydatna TYLKO jeśli możesz zmienić wysokość tego elementu w kontekście całego projektu ...) 

Powodzenia