Im look as much as possible to avoid having to use a JS solution for this. But if that is my only option to get this working then ill bite the bullet.
I have a slide out nav section that has a toggle button in it.. this nav section covers a topbar that has a corresponding toggle button in it..
they both have hover animations using CSS3 animations applied to the :hover attribute. My issue occurs because both toggle buttons align with one another.. so when the nav is opened and closed you do not need to move your cursor.. because of this the :hover event doesnt appear to be getting triggered on the new element that is under the cursor until you move your mouse..
However, on Firefox they do appear to get triggered
I have had a look at people having issues with this to do with jQuery hover events not firing: here
If anyone knows of a css or html way to do this i would be very greatful. My fiddle is here:
http://jsfiddle.net/Lm2fa/1/
EDIT:to test this please click on the open/close menu button (top left hamburger) then without moving your mouse click the button again to close the nav.. you shoul only experience the :hover event when you click or move your mouse
EDIT:this seems to definitely be occurring on OSX Chrome, OSX Safari (havent got a PC to test with)
Related
I have this simple code
<style>input:hover{border: 3px solid blue;}</style>
<input type="text">
Expected behavior: when I hover the mouse over the input, new style should appear in the devtools styles section, but it only appears when I force the hover state through the devtools(not with the mouse). As I can remember it should show styles in both cases, am I wrong? This happens both in chrome and firefox devtools, so I can't really understand what is happening, I use css for 3 years and I can't remember this problem.
I believe most dev tools used to show hover states, but now I don't think any do (without clicking). Probably because they added support for so many element states that if they showed them all it could become confusing.
I am having a problem related to hover pseudo not working. Problem is with Surface pad's chrome browser. Hover effect is working fine in rest of the browsers but not working in chrome. I am using surface pen to check the hover.
HTML:
<ul>
<li>link</li>
</ul>
CSS:
a:hover{cursor:pointer; background:red;}
You’ll need to make sure that your hover anchor has an href on it to make it touchable. You can do this with either href="#" or href="javascript:void" , then you need to add aria-haspopup="true" to tell the device that after the user releases the tap, whatever was visible should remain visible until another interaction.
Got it. Actually earlier i was having a problem on touch devices. Hover effects were working on touch and was not changing on untouch the area.Hover effect stick with the touch and didn't go back. so on touch devices i changed the :hover into :active.
You can see this working/breaking here: http://new.campchampions.com/parents
The issue only crops up in IE10. After the user has scrolled a little ways, the navigation becomes pinned (a class of fixed gets added to the body which effects the hgroup.primary(I know, I know hgroup is not a 'thing' anymore. Don't judge me.)). If you go back to the top of the page, it un-pins, goes back to normal.
In IE10, when you go back up to the top of the page, the nav elements disappear until the mouse moves up over ANY part of the yellow bar. It's driving me nuts.
I've attempted things like having JS append/alter content in various elements on scrolltop/un-pinning the navigation.
I've got a brief youtube video showing the issue: http://youtu.be/-itTC_j-9YE
Any thoughts, or ideas? That'd be great. Thanks!
While I have no solid answer for the reason behind this redraw issue, I found that an instantaneous jQuery hide/show redrew the element completely without any visible side effects.
Using a non-jQuery JS hack to add a class to the HTML element in IE10 (see Willem de Wit's answer to this quandry), I made sure this code only fired on IE10.
if($('html').hasClass('ie10')) {
$('.primary').hide(0, function(){$(this).show()});
}
See http://www.tuxx.nl/internationaal/vliegafstanden/internationaal/. Now scroll down and you see a button bar and one button with Doorsturen on it. Now, it works fine in Chrome, Firefox, but in Internet Explorer 8 you can see an e-mail icon. I looked where it came from and I saw that Sharethis automatically puts an image inside the button. I tried to get rid of that, but that didn't work. How can I remove this image/icon?
Use firebug to see if it has classes and use css to hide it with display:none;
If it does not have any class/id you could try to catch it with css selector img[src="/*YOUR IMAGE SRC*/"
To better help you I need to see some code ;)
I have a navigation bar with some nodes that have a drop down menu to show more options, everything works wonderfully in IE/Firefox but in Chrome on :hover the links go transparent instead of having a nice background color like in IE and Firefox.
Here is a JSFiddle, if you run it in Chrome and hover over the Admin option you will see the drop down and extended options, when hovering over those they should display similar to the top level items but they do not.
http://jsfiddle.net/6jX5J/
Anyone see any problems in the HTML or CSS?
Thanks!
Try changing you CSS selector from descendant to a child selector in:
#nav li:hover
Change to
#nav>li:hover