jquery ui theme api
EDIT: 1
The following does not work, even after clearing browser cache:
.ui-state-hover {backg开发者_C百科round-image:none;background-color:red;color:red;padding:50px;margin:50px;}
ORIGINAL QUESTION:
Using jquery's ui theme api, I am trying to change the hover effect of jquery-ui-tabs:
.ui-state-hover {background-color:red;color:red;padding:50px;}
Here is the full script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$( "#tabs" ).tabs();
});
</script>
<style type="text/css">
.ui-state-hover {background-color:red;color:red;padding:50px;}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus </p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p>
</div>
</div>
</body>
</html>
But it does not seem to work. What am I doing wrong?
you need to be more specific because ".ui-state-default" with additional class hierarchy in the external css overrides your css.
change .ui-state-default {background:red;color:red;padding:50px;} to
#tabs .ui-state-default {background:red;color:red;padding:50px;}
and background:red instead of background-color:red because there is an background image
see demo http://jsfiddle.net/aX5c9/
I guest it's 'ui-state-hover' class?
First off, I believe that it's .ui-state-hover, not ui-widget-hover. Secondly, it looks like the original theme is using a background image, not a color:
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
So if you want to change the background, you'll need to either use a different image, or set background-image: none; in addition to background-color.
Check out this JSFiddle:
http://jsfiddle.net/Uce8S/
You need to do .ui-widget-header .ui-state-hover for tab headers.
加载中,请稍侯......
精彩评论