How to have 3 different conditional border colors?-CodePudding

I need to style an icon button with 3 different border colors, one for regular state, one for on hover, and another one for when the icon is clicked. I am using react, and right now I have a function that checks if the current button is the one that is selected and that works for regular and on clicked, I also added the onHover color but if that button is the on that is active you can't tell because on hover takes over, you can't see the clicked border until you move the mouse away. How to go about this?

CodePudding user response：

you need 3 style declarations

.button {}
.button:hover {}
.button.selected{}

If you write them in exactly this order, then the button's selected style won't overridden by hover as the declaration for selected comes after declaration for :hover state and won't be overridden by it.

CodePudding user response：

It's tough to tell without seeing your code, but it seems like you want both borders for active and hover states to show at the same time.

Since you can only have one border on an element at a time, one state will always overwrite the other.

There are some effects you can use with other CSS properties so that users can tell when a button is both active and being hovered:

outline - outline is similar to border and the two can exist at the same time (outline will probably only work if the buttons are rectangular because it doesn't adhere to border-radius)

box-shadow - this could be an easy way to add a hover effect underneath the element and its border

pseudo-element - This one is more complicated but adds the most flexibility - perhaps adding a ::before or ::after element to the button, positioning it absolute behind the element, and have that behave separately based on whether the button is active or hovered.

CodePudding user response：

I usually use CSS's :hover feature along with the framework (e.g. react)... there are some good examples online where this feature doesn't just change color, but present some type of animation to help the link/button stand out: https://www.proglobalbusinesssolutions.com/css-hover-effects/#:~:text=A CSS hover effect causes a graphical interface,on the web page and improve site interactivity

You might also consider this answer: How can I access a hover state in reactjs?