CODEWITHSUNDEEP
htmlcssbutton
rustyBucketBay
rustyBucketBay

Reputation: 4561

Button behaviour. Make hover work after clicked

I have this button:

<li><button type='button' class='button' onClick={props.signOut} >Log Out</button></li>

An I have this style

button {
  background-color: Transparent;
  background-repeat:repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  color: white;
  height: 64px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.116);
}

My problem is that when I click, the hover does not work anymore until I click elsewhere and the focus of the button is lost. I have tried the different html button types (button, submit and reset) according to this and tried many things with the css pseudo-classes applying them in different orders:

button:focus:not(:focus-visible) {
  background: transparent;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.116);
}

button:active {
  background-color: Transparent;
}

The behaviour I want is the hover always working, except only while the button is clicked. After clicked, to have the hover always active and never the focus on the button. By this I mean not a "toggle" button, but a button that always comes back to its default state and is waiting to be "pushed down" again.

Hope I had explained myself.

Upvotes: 0

Views: 1169

Answers (1)

caslawter
caslawter

Reputation: 672

I assume that you are using React for this. The button is suppose to return back to its default state when it is not hovered even after you click on it. However, it is not working because there is something else that is tampering with your button. Try to check the developer tools and your props.signOut function to see if there's any error. My guess is that something went wrong in the props.signOut or perhaps another CSS is interfering with the button since you are not using the class selector but a button selector instead.

Upvotes: 1

Related Questions