I have been fighting to get hover to work correctly for a ui-icon and
discovered the problem only appears when the ui-icon is enclosed in a
ui-widget-container.
So I created a test page (included below).
Then I started digging into the core css. I found the line that
causes the error. Line 22 of ui.theme.css from 1.7.1
The selector list for that line is ...
.ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus
This doesn't make sense to me. It appears the first two terms are
redundant. Match .ui-state-hover or match .ui-state-hover when
included in ui-widget-content.
Without knowing the intent of the design it is hard to say. My
thought was possibly to match combined classes. With CSS2 that is
possible, so I removed the spaces between the classes and the selector
list becomes ...
.ui-state-hover, .ui-widget-content.ui-state-hover,
.ui-state-focus, .ui-widget-content.ui-state-focus
With this modified CSS all three buttons in the following test page
have a functional hover.
Is this truly a bug in the theme CSS or am I missing something?
Thanks,
Troy
---
<html>
<head>
<title>JQueryUI Icon text</title>
<link type="text/css" href="css/cupertino/jquery-
ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></
script>
<script type="text/javascript" src="js/jquery-
ui-1.7.custom.min.js"></script>
<style type="text/css">
#body {
margin-left: 20px;
margin-right: 20px;
}
.ui-widget-header { text-align: center; }
.ui-widget-content { text-align: center; }
.app-button { float: right; margin: 2px 2px 0 0; }
.app-button.ui-state-hover {margin: 1px 1px 0 0; }
</style>
<script type="text/javascript">
$(function(){
$(".app-button")
.hover(
function(){$(this).addClass("ui-state-hover");},
function(){$(this).removeClass("ui-state-hover");}
)
;
$(".app-button").addClass("app-icon ui-icon
ui-icon-trash");
});
</script>
</head>
<body>
<div id="body">
<div class="ui-widget">
<a class="app-button"></a>
<p>ui widget</p>
<div class="ui-widget-header">
<a class="app-button"></a>
widget-header
</div>
<div class="ui-widget-content">
<div>
<div><a class="app-button"></a></div>
widget-content (hover FAILS!)
</div>
</div>
</div>
</div>
</body>
</html>
---
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
