There's a button that changes color when a cursor hovers over it.
Example jsfiddle: https://jsfiddle.net/xftbqku3/5/
I wish to have an effect that goes like this:
When the button is clicked, disable background-color css rule until the next time it is hovered over.
In other words, when I click the button, I want it to show the button color (red or green) and not the hover color until the next time I hover over it.
Is it possible to to this with just css?
I am not able to comment(not enough reputation). But maybe you can try using <input type=checkbox> and in css input:checked
Related
I have some anchor tags(tried with navlink tags also) in a menu. For any link, there can be active(clicked), hover or normal styles(defined in css).
I have separate styles for all 3. They display normally for normal styles(not hovered, not clicked/other tag clicked) and hover.
Now, I want active styles to STAY when I click an anchor. But they disappear when I stop holding the mouse button.(meaning those styles stay for that clicked link when I have clicked on it and holding the mouse button. When I stop holding the button, styles disappear).
The color changes to blue instead, and goes to other links when clicked, which is how it should be for the styles. But I am not understanding where is that color coming from either.
I try to stylizing a Material Checkbox (https://material.angular.io/components/checkbox/overview). There are several things that I have done without problems (like change color, border etc). I would like, but I can't seem to do it, only when the checkbox is unchecked, display the checkmark on hover. As the example on the right in the picture, this to indicate that we can click on the checkbox checkbox-hover
Any ideas ? Thank you !
The checkmark is hidden by setting the SVG path's stroke-dashoffset to ~23px.
In order for the checkmark to be shown on hover you'll want a CSS rule to set this value to 0px and supply a background colour to the checkbox so the checkmark can be seen.
I have a jsFiddle that illustrates the problem. I'm using the bootstrap CDN on my site. I've overridden the Bootstrap btn-primary class in CSS in order to make them match my site theme.
The problem: btn-primary has a hover that toggles the icon background color to a shade of blue. But when I click on the button, it seems to 'lock' onto the hover color. It will only change back if I click on the page OUTSIDE of the button.
I know I could just add !important to the background line in my CSS, but then I lose the mouseover/hover color change, which I'd like to preserve.
Can anyone explain why this is happening or give me a fix to allow my overridden button to switch back to its desired/initial color after clicking it and mousing off of it? Thanks.
JsFiddle link
Instructions to repro problem from jsFiddle:
See the issue:
1. mouse over the button without clicking. Color changes for mouse on, changes back on mouse off.
2. Mouse over button
3. Click button.
4. Mouse off button.
5. Notice color of button remains the mouseover color, even if you mouse on/off button repeatedly.
6. click page outside of button.
7. notice button now changes back and mouseover behavior is restored.
Looking for a way to retain default mouseover behavior yet override the default bg color of the bootstrap btn-primary.
I have made a round button and i have set a background image on it. I want it to display the other background button image while hover over it.
You can do that using style sheets:
QPushButton:hover { color: white }
See more about pseudo states here.
I need to implement textbox with inplace button (for search or filter purposes). So, I need to get Qtoolbutton, that is flat and rendered as icon, and obtain the border when hovered by mouse or pressed. And maybe I'd add some almost transparent background on hover too.
I tried to set the following stylesheet:
'border: none; hover {border: 1px} pressed {border: 1px}'
, but it seems that only border set. Nothing happens when I hover or click it. I tried to set autoRaise() to True and False, I mean, maybe some intersection occured, but haven't succeed.
Furthermore, when button is placed in QlineEdit, if I set stylesheet to it, whole button vanishes, I cannot no border or icon or anything.
try putting ':' before 'hover', as well as 'pressed'