Home/ Questions/Q 6697321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:26:48+00:00

Using this: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html I’m using background images instead of gradients/plain colours. I want to

  • 0

Using this: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

I’m using background images instead of gradients/plain colours.
I want to have the bottom of the dropdown box rounded,
this works:

.ui-corner-bottom {background:url(images/backbottom.png);}

but how do i access/call the selector which is made when you roll over the bottom?
this code gets called for hover on all the li.items,

 .ui-widget-content .ui-state-hover, 
 .ui-state-focus, 
 .ui-widget-content .ui-state-focus {background:url(images/select.png) }

i assumed this would work but it doesnt

.ui-corner-bottom-hover {background:url(images/backbottom2.png); }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should do the trick.

    .ui-corner-bottom.ui-state-hover {
    background: url(images/backbottom2.png);
}

    Jquery ui applies the ui-state-hover class to any element when it’s hovered, by writing both classes together as the style will only be applied to elements that have both classes.

    And some additional advice:
    I recommend you to use css sprites for this hover effect, this way you avoid the ugly flash of nothing when hovering for the first time over an element that uses a different image for its hover state. Chris Coyier wrote up a nice summary/introduction here: http://css-tricks.com/158-css-sprites/

    • 0