1

I'm tyring to style the jQuery datepicker. I can't use a jQuery theme as it wrecks the rest of my site.

I've got it all working expect for one bit - highlighting the current day.

The problem I'm having is that when the datepicker first loads the current day is displayed as follows:

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight ui-state-hover" href="#">14</a>
</td>

When the user hovers over any other day, the ui-state-hover on the current day is removed, and then the current day highlighting works ok:

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight" href="#">14</a>
</td>

My CSS for the hover state is like:

.ui-widget-content .ui-state-hover { ... }

and on-load this is overwriting my ui-state-highlight which highlights the current day.

I've tried to do:

.ui-widget-content .ui-state-highlight .ui-state-hover { ... }

Which I thought would preferentially match as it's a more specific selector, but it's not working.

So the question is, how can I make .ui-state-highlight .ui-state-hover override .ui-state-hover so I don't lose my highlight on hover?

Thanks.

4

2 に答える 2

0

理想的ではありませんが!important、セレクター内の各スタイルにを追加して、独自のスタイルでオーバーライドすることができます。

.ui-widget-content .ui-state-hover {
  color: '#00ff00' !important;
}
于 2010-07-14T12:43:19.290 に答える
0

たとえば、要素を追加して、階層上の位置を上げることができtd.ui-widget-content td.ui-state-hoverます。また、おそらく最も洗練された解決策ではありませんが、スタイルをインラインまたは実際の html ページに<style></styleタグ内のヘッダーとして追加すると、最後に呼び出されたスタイルシートであれば他のスタイルシートよりも優先されます。

于 2011-02-21T23:14:17.213 に答える