CSS Menu Hover "Hangs" in Chrome & Safari

css menu hover hangs in chrome & safari

You may be interested to know that removing the "visibilty: hidden" rule from the ".menu ul li ul" selector (on line 105 of the CSS) fixes the problem for me in Chrome. Checked in FF3.6 and it works too - didn't check it in anything else.

CSS Hover + Element crashing in webkit (Chrome, Safari)

Change

.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper ul:hover {
    display:block;
}

to

.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper:hover ul {
    display:block;
}

You don't want to display the ul when you are hovering the ul but when you are hovering the parent div.

Why is a hover menu 'ghosting' in Chrome?

For some reason, the problem appears to be fixed if you set position: static on #menu-item-197. I don't know why, though, and it probably shouldn't ghost in the first place - but at least it works!

CSS not working in Safari, but in Chrome and other browsers it does

You need to remove background-attachment : fixed not supported on the safari , check it here Can I use , last parameter of background css key is an attachment

image moves on hover - chrome opacity issue

Another solution would be to use

-webkit-backface-visibility: hidden;

on the hover element that has the opacity.
Backface-visibility relates to transform, so @Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.

See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.

Fix CSS hover on iPhone/iPad/iPod

Here is a basic, successful use of javascript hover on ios that I made:

Note: I used jQuery, which is hopefully ok for you.

JavaScript:

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS:

.mm { color:#000; padding:15px; }

HTML:

<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>

How to prevent sticky hover effects for buttons on touch devices

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over."

For browsers that do not have this implemented (or didn't at the time of this original answer), I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:

html.my-true-hover button:hover {
    background-color: blue;
}

(A variation on the .no-touch technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover class accordingly:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

---

Related Topics