- This topic has 7 replies, 2 voices, and was last updated 3 years, 8 months ago by David.
-
AuthorPosts
-
July 25, 2020 at 6:24 pm #1376370Joey
I have two buttons. Normally the “buy” button is always white background, to give emphasis. Here is what it currently does (https://simipress.com/toggle/):
Is there a way to make the “buy” button turn black when I hover over “read” so it isn’t confusing to have two white buttons? It’s not really a toggle, as both buttons are linked to another page.
Just in case, this is my current CSS. .button.ghost is the “read” button:
.button.ghost, .button.ghost:visited { color:white; background: transparent; border: 1px solid #FFF; } .button.ghost:hover, .button.ghost:active { background: #FFFFFF; color: #222222; border: 1px solid transparent; } .button.buy, .button.buy:visited { background: #FFFFFF; color: #222222; border: 1px solid transparent; } .button.buy:hover, .button.buy:active { color: #fff; background: transparent; border: 1px solid #FFF; }
Thank you.
July 26, 2020 at 7:58 am #1376938DavidStaffCustomer SupportHi there,
hmmm…. try editing your HTML to include a button-wrap
<div>
around your 2 x buttons eg,:<article class="box buy"> <div class="button-wrap"> <a class="button buy" href=....>Buy</a><a class="button ghost" href=.....>Read</a> </div> <!-- rest of HTM Here --> </article>
Then maybe this CSS:
.button-wrap:hover .button.buy { color: #fff !important; background: transparent; border: 1px solid #FFF; }
July 26, 2020 at 3:24 pm #1377291JoeyThat works, but if I hover anywhere to the right of those two buttons it also triggers the button-wrap and turns the buy button black (when I’m not hovering over any button).
I had a mistake in my code, I want to keep the buy button always white, even on hover, like so:
.button.buy, .button.buy:visited, .button.buy:hover { background: #FFFFFF; color: #222222; border: 1px solid transparent; }
The button wrap overrides this CSS. Is there a way to keep the button background white at all times except when I hover over “read”? Thank you for your help.
July 27, 2020 at 12:41 am #1377553DavidStaffCustomer SupportLets try a different CSS method.
Remove the CSS i provided so the buttons now function as normal on hover.
And in your HTML swap the two buttons – so the Read comes before Buy.
Then let me know so i can work out the toggle CSS and make it so the Buy and Read are in the correct order on the frontend….July 27, 2020 at 1:47 pm #1378517JoeyOkay, here is the current CSS:
.button.ghost, .button.ghost:visited { color:white; background: transparent; border: 1px solid #FFF; } .button.ghost:hover, .button.ghost:active { background: #FFFFFF; color: #222222; border: 1px solid transparent; } .button.buy, .button.buy:visited, .button.buy:hover, .button.buy:active { background: #FFFFFF; color: #222222; border: 1px solid transparent; }
I also switched the order of the buttons so that the HTML is like so:
<article class="box buy"> <div class="button-wrap"> <a class="button ghost" href="">Read</a><a class="button buy" href="">Buy</a></div> <p></p> <h3>Paperback $6.99</h3> <h3>Ebook $2.99</h3> </article>
Should I remove the button-wrap?
July 28, 2020 at 1:13 am #1378858DavidStaffCustomer SupportKeep the button-wrap and add this below your current CSS:
.button.ghost:hover+.button.buy { background-color: #000 !important; color: #fff; } .button-wrap { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
July 28, 2020 at 3:22 pm #1379781JoeyThat is cool, thank you so much. Flex is pretty cool, I would never have figured that out. I made background color transparent instead of #000 because the box it’s sitting on isn’t quite black. It also works fine without !important for some reason, do I need to leave it on?
Thanks again David, you’ve been a lot of help.
July 28, 2020 at 5:34 pm #1379850DavidStaffCustomer Supportif its working then
!important
is not required.
Yeah Flex won the day here, as you can only use the hover event of one element to style an element immediately after it using only CSS.You’re welcome – glad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.