Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

ZhaanZhaan Professional fool ✭✭

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.

Comments

  • x00x00 MVP
    edited January 2013

    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.

    grep is your friend.

  • ZhaanZhaan Professional fool ✭✭

    Thanks a lot!

  • sorry

    design/custom.css

    grep is your friend.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2013

    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/

  • x00x00 MVP
    edited January 2013

    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.

    grep is your friend.

Sign In or Register to comment.