How to disable 'on-hover' effects for hidden buttons and menu items?

Zhaan

Some of my members use tablets and mobile devices to browse my site, and they're complaining about not being able to see on-hover buttons like 'quote', 'edit', 'delete' and so on.

To be honest, I don't much care for those effects at all, so I'd appreciate if someone could tell me how to disable them. Is it a CSS thing or jQuery?

PS: I'm using the OZONE theme.

Thanks in advance.

x00

you can do it with css

.Item .Reactions > * {
      visibility:visible!important;
}

You can put that in your style/custom.css file of your theme

It is controlled by jquery, but you can overrule it with css.

Zhaan

Thanks a lot!

x00

sorry

design/custom.css

vrijvlinder

Why disable when you can enable?

The problem is It’s a css :hover event that fires through a CSS selector on an (< a >) element with no href attribute.
To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate an iPad hover event.
If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });

$(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });
}

you could also achieve this or the opposite using a javascript:

http://www.afxdesign.com/41/iPad-Javascript-Hover/

x00

You are missing the point they can't hover and they don't want to touch. It also isn't a css :hover, that is not how it works. Such a thing is awkward and unnecessary, especially as they aren't psychic, so won't anticipate.

The :hover is on the .MessageList .Item and merely concerns the z-index

:hover only works on the same element, it cannot trigger another element that is not being hovered.

Personally I don't rate the hover feature on this, as many people might not take notice.