Issue
I have two buttons and I want the background-color to change color when I click one of them and then change back to its original color when I click the other button. I also want a hover feature that shows the color the button would be if it were to be clicked with some opacity.
I've tried
button:hover{
background-color: pink;
opacity: .5;
}
button:focus{
background-color: pink;
}
This works fine until I click anywhere in the screen and the color change is gone.
I've also tried
var buttons = $('button');
buttons.click(function() {
buttons.css('background-color', 'snow');
$(this).css('background-color', 'pink');
});
This also works fine except the hover effect stops working like I want it to. When I hover over a button, you can see the opacity change but it is no longer pink.
Is there a way to adjust either of these attempts to make it work properly? Thanks in advance
Solution
The problem is that your code is overriding the background-color
property. Add the !important
to your .button:hover
and it will work as you expect. Snippet below:
var buttons = $('button');
buttons.click(function() {
buttons.css('background-color', 'snow');
$(this).css('background-color', 'pink');
});
button:hover {
background-color: pink !important;
opacity: .5;
}
button:focus {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>
Answered By - reisdev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.