Cursor pointer not showing (CSS)

Question

I have read the other threads but still could not figure this out. When I hover over a button with cursor:pointer; set it does not work. Not only that the hover effect does not work too. I have posted all my code below, including the javascript. Not sure if it would have anything to do with the javascript or not, but I doubt it.

const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');

const colors = [
  '#6C5B7B',
  '#C06C84',
  '#F67280',
  '#F8B195',
  '#EC2049',
  'A7226E',
  '45ADA8'
];

//add event listener

colorBtn.addEventListener('click', changeColor);

function changeColor() {
  // bodyBcg.style.backgroundColor = colors[2];

  //get random number, Math.floor gives you a number between 0 and 0.9999... so we round down and times by the length of the array
  let random = Math.floor(Math.random() * colors.length);
  bodyBcg.style.backgroundColor = colors[random];
}

body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.colorBtn {
 padding: 0.25rem 0.5rem;
 border: 3px solid #fefefe;
 border-radius: 7px;
 color: #fefefe;
 background: rgba(0, 0, 0, 0.6);
 font-size: 1.5rem;
 text-transform: capitalize;
 cursor: pointer;
 outline: none;
}

.colorBtn:hover {
 background: rgb(0, 0, 0);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body>
    <button type="button" class="colorBtn">Press to change color</button>
    <script src="/script.js"></script>
  </body>
</html>

This is a css issue. If you look at the code I have set "cursor: pointer" and have added a hover effect. However when I hover over the "button" it does not change color and there is no pointer. — Hesam Alavi
– Hesam Alavi, Commented Dec 17, 2019 at 8:23
Which browser are you using? This code should work in chrome, edge and IE. — Nova
– Nova, Commented Dec 17, 2019 at 8:29

Nova · Accepted Answer · 2019-12-17 09:43:59Z

1

There were two classes named .colorBtn in the css. Should work after removing the unnecessary one.

answered Dec 17, 2019 at 9:43

Nova

3641 silver badge17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hesam Alavi Over a year ago

Thanks very much Cheng, I can't upvote yet as I don't have the privilege yet

S. Dre Over a year ago

Just as a comment. Everyone can up-vote. It is just that until you earn some rep, your votes are not displayed to everyone. But they are countered by the system and used in some metrics, AFAIU

Loi Nguyen Huynh · Accepted Answer · 2019-12-17 07:03:07Z

If you wonder why the color sometimes doesn't change, then add a line console.log(random); like the snippet below. Sometimes it seems to not change the color just because it did change but by randomly, it could change to the same color with the previous, so it looks like it doesn't work. But in fact, it works very well.

const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');

const colors = [
  '#6C5B7B',
  '#C06C84',
  '#F67280',
  '#F8B195',
  '#EC2049',
  'A7226E',
  '45ADA8'
];

//add event listener

colorBtn.addEventListener('click', changeColor);

function changeColor() {

  // bodyBcg.style.backgroundColor = colors[2];

  //get random number, Math.floor gives you a number between 0 and 0.9999... so we round down and times by the length of the array
  let random = Math.floor(Math.random() * colors.length);
  console.log(random);
  bodyBcg.style.backgroundColor = colors[random];
}

body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.colorBtn {
 padding: 0.25rem 0.5rem;
 border: 3px solid #fefefe;
 border-radius: 7px;
 color: #fefefe;
 background: rgba(0, 0, 0, 0.6);
 font-size: 1.5rem;
 text-transform: capitalize;
 cursor: pointer;
 outline: none;
}

.colorBtn:hover {
 background: rgb(0, 0, 0);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body>
    <button type="button" class="colorBtn">Press to change color</button>
    <script src="/script.js"></script>
  </body>
</html>

Collectives™ on Stack Overflow

Cursor pointer not showing (CSS)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related