3

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.

Community
  • 1
  • 1
aliahy
  • 509
  • 6
  • 15
  • can you use a web inspector to see which property is being triggered by the 'hover'? Maybe a background-color change or css filter? – Josh Rutherford Apr 08 '14 at 03:22
  • I don't see anything change when I hover over it. I just see (for example) `Support` The button hover is set with .ui-btn:hover for each swatch in the Themeroller-generated CSS file. I can disable it globally by making the hover colors the same as the normal color, but I was looking for a per-widget solution. – aliahy Apr 08 '14 at 05:05
  • This may seem a lame answer, but can you move all hover effects into a @media query, say `@media (min-width:1024px)`? I know it's not a catch-all, and you said you'd like to not have to modify CSS, but that would be the quickest way I know of. – Phil Tune Jun 26 '14 at 22:00

2 Answers2

2

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:

Community
  • 1
  • 1
Frankie Loscavio
  • 344
  • 4
  • 15
2

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}*/;
}
Philipp Rieber
  • 1,531
  • 17
  • 25