Hide and visible a button-CodePudding

I want to make a card on my website. I like it when the user hovers on the card, the card's brightness will be low and a little button appears on it. I used js "onmouseenter" to do that but it didn't work.

CodePudding user response：

Use then :hover css tag as Itamar said

Ex: css

.card:hover .button {
    display: none;
}

hides button on hover

CodePudding user response：

You can use pseudo-class :hover

button:hover {
   {...}
};

Can you show us your CSS code?

CodePudding user response：

const card = document.querySelector(`.card`);
const button = document.querySelector(`.button`);

card.addEventListener(`mouseenter`, () =>{  
  card.style.backgroundColor = `rgb(150,0,0)`;
  button.style.display = `block`;
});

card.addEventListener(`mouseleave`, () =>{  
  card.style.backgroundColor = `rgb(255,0,0)`;
  button.style.display = `none`;
});

.card{
  width: 150px;
  height: 150px;
  background-color: rgb(255,0,0);
  display: grid;
  place-items: center;
  margin: 20px 10px;
  transition: 0.4s;
}

.button{
  display: none;
  cursor: pointer;
}

<div >
  <button >Click Me</button>
</div>

I hope that this will help.