I'm animating my navigation links, and scaling them up on hover. Like so:
nav#nav a:hover
color coal
transform scale(1.64)
transform-origin center -109%
This causes the element to move out from under the cursor, reversing the effect, causing it to move back, redoing the hover, stuck in this ugly loop.
How can the hover effect be maintained?
Without actual code I can only give a conceptual answer:
Could you put the item that is animated inside of a div that doesn't change size and apply the hover to that? So you hover over the div it animates the inner object, but the div doesn't move so even after the inner object changes the mouse is still hovering over the div.
Related
I have a flip card (div with 2 sides and flip effect on mouse hover). On the back side of the card, I have some clickable buttons with a hover effect. But the hover effect doesn't work well, because on the other side of the card I have some div that somehow interferes with the buttons hover effect, even though it is on the other side of the card.
How can I fix it?
I use backface-visibility: hidden;, I was thinking of using display:none; but it will not work, because then during the card flipping the image will just disappear.
Is there any other solution?
Does anyone have idea why hover effects ends before mouse is moved off an element?
I applied hover effect on before pseudo element.
The :hover selector will complete once you hover over an element. Moving the mouse off of the element will stop/remove the effect. You should post in JSFiddle for more help. That way we can see what's going on.
I've only been testing this in IE11/Win7 but since it doesn't work there it matters little to me if it works in any other browser. I need i solution that will work accross all browsers.
Im creating na html5 menu using only css. i have a background set for the dropdowns and am using :before to place na arrow in menu items that have a submenu. I also want the submenus to show up in a fade - and that's where my problems start.
At first i had the transition and the background set in the inner ul, and that worked - except :before counts as a child so the arrows would only show when the submenu was visible and that's not good.
So i placed a div around the inner ul and used :before in the div while i only fade the ul. Then the arrows would still show when the submenu wasn't visible, but when the menu was visible the background would show up only as a line accross the top (height 0 i guess)
So i placed the background in the div and now it workd except the fading only happens to the menu items themselfs and not the background.
here's a jsfiddle with my last attempt.
Is there a way i can make what i want? (show arrows always + background shows and fades in)
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events
I'm making a menu with <ul>/<li> and CSS.
Here's what I have so far: https://jsfiddle.net/gANfS/6/
The problem is that if you mouse over the top edge within the 5 pixel margin, it starts getting crazy and going back and forth between the hover and unhovered state because the size of the block grows and shrinks. How can I fix this? When I shrink the li, I don't want to be shrinking the hover area. That would fix it, but I'm not sure how to pull it off. Ideas?
this is a hack job...but it will work
instead of magin-top:5px;
do border-top:5px solid black;
if you want your background to to be a different color, just make sure to set the border color to the same color.
Wrap your li content into a div, then apply your shrinking to that div (.sel div:hover instead of li:hover) and this should make it.
The reason for that is on mouse over, the button moves down and sets a margin-top 5px. Then, if the mouse is over that top edge, the button no longer has "hover" state and it retracts back. When it does get back, it switches to mouse over state and the journey begins again.
You could use padding-top:5px instead of margin-top and set the HOVER effect on the whole container. Padding, as opposed to margin, is space inside the element. That way, when the mouse is over the top edge, it would still be considered as over the element and it will not flicker anymore.