CODEWITHSUNDEEP
csshovermobile-safari
user2666249
user2666249

Reputation: 117

hover in mobile safari

I try to add a hover effect to one button in css. I will build an app with mobile safari. I use baker framework to do it. Baker framework use the engine of the mobile safari. I created the hover and it works in chrome, firefox, opera but not in ipad preview. Do you have any idea what is wrong? Here is my code:

.slidebutton {
    position:absolute;
    width: 50px;
    height: 50px;
    top: 0%;
    background-color: white;
    left:974px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
    clear:both;
    }
.slidebutton:hover {

    width: 150px;
    height: 50px;
    top: 0%;
    background-color: white;
    left:874px;
    clear:both;
    display: inline;
    }

Thanks!

Upvotes: 1

Views: 1687

Answers (4)

Y.D.X.
Y.D.X.

Reputation: 128

According to webonomic, there's a simple but weird solution: Add the ontouchmove/ontouchstart/ontouchend (as a boolean) attribute onto <html> or <body>.

Example:

<!DOCTYPE html>
<html>
……
<body ontouchmove>
    ……
</body>
</html>

Note: The original post also suggests onclick and tabindex='0', but it doesn't work on iPhone 6 / iOS 12.5.5. (the author tested on iPhone 11 in 2019)

Upvotes: 0

millerf
millerf

Reputation: 705

I used this to get around this:

$(document).delegate(this.classWithHoverState,eventHover,function(e){
            if(e.type=='mouseenter' || e.type=='touchstart'){
                $(this).addClass('hover');
            }else{
                $(this).removeClass('hover');
            }
        })

And then just add a .hover class

Upvotes: 0

ericjbasti
ericjbasti

Reputation: 2075

Ran into the same issue on a site recently:

//jQuery code
$(".slidebutton").hover(function(){ // this block is strickly to enable our hover effect on mobile ios
    $(this).addClass('active');
},function(){
    $(this).removeClass('active');
});

Then you should simply add .slidebutton.active to your css:

.slidebutton:hover, .slidebutton.active {

Upvotes: 1

Federico Bucchi
Federico Bucchi

Reputation: 54

Ok I tested that with Safari and it is working (using a Mac).

Using Safari on iPhone not... you have to use Javascript; try this:

$('.slidebutton').mouseover(function(event) {
    //apply the css property
}).mouseout(function(event) {
    //apply the css property (reverse)
});

Upvotes: 0

Related Questions