CODEWITHSUNDEEP
cssjquery-mobile
aliahy
aliahy

Reputation: 519

JQuery Mobile 1.4 How to Disable Hover Effect on Mobile Devices

I'm having a similar problem as described in this question, but with JQuery Mobile 1.4, particularly with the list views. A slight tap that is not enough to be considered a click causes list elements to highlight and stay highlighted:

enter image description here

Can anyone tell me how I can prevent any hover highlighting in my application? I would rather not have to modify any of the JQM theming CSS to do this, but I will if that is what it takes.

Upvotes: 3

Views: 8310

Answers (2)

Philipp Rieber
Philipp Rieber

Reputation: 1581

To prevent any hover highlighting in a jQuery Mobile 1.4 Listview you can overwrite the appropriate CSS according to the swatch you're using:

/* Button hover */
#yourList.ui-group-theme-a .ui-btn:hover {
    background-color: #f6f6f6 /*{a-bhover-background-color}*/;
}
/* Button down */
#yourList.ui-group-theme-a .ui-btn:active {
    background-color: #e8e8e8 /*{a-bdown-background-color}*/;
}

Upvotes: 2

Frankie Loscavio
Frankie Loscavio

Reputation: 344

It looks like maybe there is a jquery hover event or mouseover being triggered to set the interaction state to something like ".ui-state-hover" or ".state-hover"

1.

jQueryUI - removing class on hover

2.

function overPrevent(e){
    e.preventDefault();
    return false;
}

$(".options li").hover(overPrevent,outOption);

// alternative to above but still using JavaScript
$(".options li").click(function() {
    $(this).removeClass("ui-state-focus ui-state-hover");
}

 // alternative to above but still using JavaScript
 $(".options li").hover(function(e){
    $(this).removeClass("ui-state-hover");
});

OR maybe unbind to the mouseenter and mouseleave?

3.

$('.options  li').click(function(){
     $(this).unbind("mouseenter mouseleave");
})

OR try a pure css override

4.

.theme-group-header .state-default .corner-all .state-hover:hover{
   background:none;
}

also detecting mobile up front with something like this small library - http://detectmobilebrowsers.com/

then you can name space your css and override the jquery ui library with something roughly like this:

.touch{
   .theme-group-header .state-default .corner-all .state-hover:hover{
       background:none;
   }
}

see also references:

Upvotes: 2

Related Questions