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.
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.
Is there a way to show the signpost when hovering an element? For example, if I hover on the icon, the signpost should show up. I'm not into accessibility requirements, I just want to trigger it when hovering.
I got working now. So I just need to use the [(clrIfOpen)] and bind it to a variable. Then I just have to add a mouseenter and a mouseleave event to the icon that set the variable to true or false.
I've created a 'show on hover' mat-menu button as you can see here:
https://stackblitz.com/edit/angular-show-hide-menu?file=app%2Fshow-hide-menu.scss
The problem is, when I click the button it disappears, leaving me with an odd-looking mat-menu. I've tried targeting the button's active or focus states using css (shown in the example) but that doesn't appear to help keep the active button appear.
When you click the button in the example you will see the blue background flash when the button is active, however it doesn't stay blue. The blue background is there just to debug, but basically I want the 'display: flex' css to kick in whenever the button is clicked i.e. while the selected menu is active.
Any help greatly appreciated!
-S. Arora
Your "More Options" button disappears because it's no longer active or focused after the menu opens. In fact, you can't make it active or focused because the menu creates a transparent backdrop layer that covers everything else on the screen, which you can see when you inspect the HTML. That's why you can't get the button to reappear while the menu is open.
One way around this is to watch the state of the menu itself and add a class to the button whenever its associated menu is open:
<button fxFlex="80" mat-icon-button matTooltip="More Options"
[matMenuTriggerFor]="optionsMenu" class="hover-display"
#menuTrigger="matMenuTrigger" [ngClass]="{ 'open': menuTrigger.menuOpen }">
Then you can use this class in your CSS instead of targeting the active or focused states:
.node .hover-display.open {
display: flex;
}
when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.
I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?
I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.
Having an issue with this myself until I applied the style to .btn-default:active:focus
When I click on some button or I click on the a element in grid or list view, a default orange color appears. I don't want that color to come when I click on it. Please tell me how can I do this.
And also is it possible to change the orange color by some other custom color when i click on button or items in grid or list view.
There is an example of how to set this here:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1c9e319c-79aa-4608-a302-0a6c9d93d504