Alpine JS dynamic style attribute on rollover - css

Question

I have 2 colour pickers (one for the background and one for the text colour).
They are linked to the styles of a button
<button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button>
This works fine.
I would like to swap these variables when the button is hovered over or is active. i.e. the background colour becomes the text colour and the text colour becomes the background colour.
Any suggestions? Is this possible?
Thanks in advance!

Answer 1

We can use the #mouseover and #mouseleave events to swap the colors of the button, furthermore we use the object-binding syntax as well. In the x-init directive, we create two $watch listener objects that will update the styles object when the user picks a new color.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{bg_color: '#e66465', text_color: '#000',
styles: {'background-color': '#e66465', 'color': '#000'}}"
x-init="$watch('bg_color', val => styles['background-color'] = val),
$watch('text_color', val => styles['color'] = val)">
<div>
<input type="color" x-model="bg_color" id="text">
<label for="text">Background color</label>
</div>
<div>
<input type="color" x-model="text_color" id="bg">
<label for="bg">Text color</label>
</div>
<br>
<div>
<button #mouseover="styles['color'] = bg_color, styles['background-color'] = text_color"
#mouseleave="styles['color'] = text_color, styles['background-color'] = bg_color"
:style="styles">
Hover to swap colours
</button>
</div>
</div>