Cursor:pointer doesn't work

HTML-CSS
1

Codepen: https://codepen.io/ricardonothing/pen/MWyWVxx?editors=1100

GitHub: https://github.com/RicardoRien/Flowerlover-Website

The “X” exists (console show it) but when i try to press it doesn’t work, including the property cursor:pointer (when i hover over the “X”). I been playing with the z-index and still get same result.
The FINAL purpose of this “X” is press it and “disapear” the content (ex: Rosa title description, and background).

cscs
cscs1021×495 272 KB

Any advide?
Thanks in advance.

2

Where’s your JS file?

3

It’s in there. It’s just hidden on the right side. You have to expand it into view.

1 Like
4

No, when i hover over the “X” doesnt show cursor: pointer.

5

Sorry, my response was aimed at sober9075.

1 Like
6

Do you have your code on github? Let me try it on my machine

7

Yes!

8

Use this JS Code

const closeBtn = document.getElementsByClassName('closeBtn')

Array.prototype.forEach.call(closeBtn, (btn) => {
  btn.addEventListener('click', e => {
    btn.parentElement.style.display = 'none'
    console.log('hello')
  })
})

And change the css property of slide to

position : relative;

all your flowers were one on top of the other, and I think the click event wasn’t going to the right element

1 Like
9

Thanks! but when i change the slider to ‘position: relative’ and then click the ‘next’ button to see other images the whole slider disappear.
Thanks for trying to help.

10

Anyway, i alrady fixed the problem, with a simple z-index (lol). How Jen Simmons says “position: absolute is evil”. Thanks a lot! i have to keep studying. I don’t know why ‘querySelectorAll(’.closeBtn’)’ doesn’t work. And other things.
Thanks again.

1 Like
11

You can always refer MDN Docs…