I am working with 2 color pickers, one for background and one for text.
These are connected to the styles of a button
<button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button>
Everything is functioning well.
I am looking to interchange these variables when the button is hovered over or active. Meaning, the background color would switch to become the text color, and vice versa.
Do you have any suggestions? Is this even feasible?
Thank you in advance!
To change the button colors upon hovering, we can utilize the @mouseover and @mouseleave events along with the object-binding syntax. Within the x-init directive, two $watch listener objects are created to update the styles object whenever a new color is selected by the user.
<script defer src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4c415d444348475e6d1e03550355">[email protected]</a>/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 switch colors
</button>
</div>
</div>Experiencing an issue with the Vue.js transition feature. Check out this link for reference. When the transition enters, it works smoothly, but when transitioning out, it's not functioning properly. File: genetic.vue <transition name="slide-f ...
Currently enhancing my Bootstrap skills and seeking assistance with a card and form alignment issue. Struggling to properly place a form within a card. Any suggestions or insights on resolving this? <div class="row row-content col-sm-8"> &l ...
Hey there, I'm a newcomer to web development. For my very first project, I'm working on a resume page. I'm looking to have a fixed left div where I can showcase my skills, and a larger div on the right side for the main body content containi ...
I have a unique div setup where I'm defining data attributes to display a product list. Each div contains data attributes for category (data-category) and price (data-price). I want to be able to show or hide specific divs based on selections made usi ...
How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled? Ensure the image is both inscribed and centered Set dimensions and position usin ...
Recently, I successfully created an HTML webpage with CSS and JS that looks and functions perfectly on my PC. However, when attempting to access it on my phone, I encountered some issues. Despite transferring all the necessary files to my phone, only the ...
The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...
Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display: 1 2 3 4 5 6 As: 1 4 2 5 3 6 Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when ...
I am trying to achieve a scrolling effect on my webpage by clicking a button that will target a specific div with the class "second". Currently, I have implemented this functionality using jQuery but I am curious about how to accomplish the same task using ...
Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...
Initially, here is the CSS code that I am working with: background-image: url(/style_elements/img/first.png), url(/style_elements/img/second.png); I am trying to specifically target the second background image URL using jQuery: var item_img_url = item_i ...
Apologies for not finding a suitable topic to discuss. Is it possible to place an image next to a jQuery dialog, similar to the following example? If so, how can this be achieved? ...
Having trouble making a map embedded via an iframe on a WordPress page display responsively at full height independent of the device? Check out: . To clarify, by full height, I mean that the bottom of the map should not extend beyond the screen, eliminati ...
There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...
I have an angular app with an autocomplete field that I need to adjust the position of. I have consulted the official documentation under the method updatePosition, which states: "Updates the position of the autocomplete suggestion panel to ensure that it ...
I have a unique project where I am developing a user interface for a paper-rock-scissor game. To create the UI, I included four buttons: "Start game," "rock," "paper," and "scissor." Initially, I wrote separate code for each button, which worked perfectly ...
I have created a side modal that extends to full height. The content in the modal body is quite lengthy, but I am facing an issue where the header, body, and footer are not equal in size. I am considering using scrollspy on the HTML body tag to potentially ...
I have a view on angular just like this: https://i.sstatic.net/JimWN.png And this is my dashboard.component.ts: export class DashboardComponent implements OnInit { tablePresetColumns; tablePresetData; ngOnInit() { this.tablePresetColumns = [{id: ...
I need help with applying a gradient line below each row of data that I am fetching from my database and displaying in a <table>. I've been able to achieve the design using an <hr> element, as shown here: http://jsfiddle.net/ghrw3k8e/. Ho ...
I am facing an issue with a simple font-size transition in Safari, causing stuttering while it works smoothly in Chrome and Firefox. I'm not sure if this is a Safari problem, a Webkit issue, or something else entirely. Any workaround suggestions would ...