I have a fixed button to roll the page to the beginning. When you put the mouse hover, it animates (and animate back when mouse is out). But if you hit the icon, the animation doesn't roll back. The arrow should translate 360ยบ back.
The structure is
<div id='back-to-top'>
</div>
The workin code with css is http://jsfiddle.net/7vrw4abx/
You are associating the style with :focus so on click of the item it will stay the same, until you click away. Change the following
.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before {
to this
.hvr-icon-spin:hover:before, .hvr-icon-spin:active:before {
(Demo)
Related
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
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;
}
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 may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
I have a submit button that changes when the user hovers his mouse over it. Right now the image is taking a while to load and you get a half second where there is white screen instead of the other button. Is there anyway to improve this using just CSS and HTML or do I need to do some JS work?
Use a sprite image, and then toggle background position on hover. That ensures that the image being displayed on hover has already been downloaded.
CSS Sprites
And load the css sprites when DOM is ready, this can sort of "preload" the image before user hovers on the submit button :)