Sliding button (change other button when I hover) - similar to toggle

Hi 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;
}

That 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.

Lets 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....

Okay, 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?

Keep 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;
}

That 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.

if 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