question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

_hover selector for buttons doesn't alter background color

See original GitHub issue

Hello! I was playing around with the _hover selector as described in the docs here, and noticed that the color scheme for the button’s background doesn’t change. Demo:

const links = [                                                                                                    
  { text: 'Home', to: '/' },  
  { text: 'About', to: '/about' },  
  { text: 'Login', to: '/login' }  
];

[REDACTED]

<For each={links} fallback={<div>Loading...</div>}>  
  {(link) => (               
    <Center>  
      <HopeLink href={link.to} fontSize="10px" class="p-1 m-1">  
        <Button colorScheme="primary" _hover={{ background: "white", color: "$danger9" }}>  
          {link.text}  
        </Button>  
      </HopeLink>  
    </Center>  
  )}  
</For>  

produces: not hovering hovering

When hovering over the “home” button. I have also tested this with the <Button> at the root of my app with the same effects.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
fabien-mlcommented, Apr 28, 2022

fixed in v0.4.4. available on the next tag.

0reactions
Dom-1commented, Apr 28, 2022

Amazing job! Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Background color of the button not changing completely when ...
Background color of the button not changing completely when hovered ; 2. It's because you have an error in your css. It's button:hover...
Read more >
CSS Button Style – Hover, Color, and Background
To change the background color of the button, use the CSS background-color property and give it a value of a color of your...
Read more >
Hover color CSS does not work - WordPress.org
I have this CSS to change hover color on my site. But it doesn't work. ... .scriptlesssocialsharing__buttons a.button { background-color: #f15025 !important ...
Read more >
Hoverable Buttons - W3Schools Tryit Editor
Hoverable Buttons. Use the :hover selector to change the style of the button when you move the mouse over it. Tip: Use the...
Read more >
hover - CSS: Cascading Style Sheets - MDN Web Docs
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found