Question

我一直试图改变Dojo Claro主题，因为它太轻了，我想摆脱一些效果。
其中一个是dijits的鼠标有没有什么方法可以禁用鼠标在按钮和输入（如文本框，过滤选择等）中的效果..... 当鼠标“覆盖”那些元素时，我无法在firebug上捕获css。应该有一个类附加到产生该效果的元素上。任何人都可以告诉它是什么？感谢

Answer 1

取自主题测试人员的基本表单窗口小部件标签上的简单启用按钮 - http://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=claro。

没有悬停：

<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_1">
    <span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation">
        <span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1">
            <span class="dijitReset dijitInline dijitIcon dijitIconTask" data-dojo-attach-point="iconNode"></span>
            <span class="dijitReset dijitToggleButtonIconChar">?</span>
            <span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">Simple</span>
        </span>
    </span>
    <input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
</span>

悬停：

<span class="dijit dijitReset dijitInline dijitButton dijitButtonHover dijitHover" role="presentation" widgetid="dijit_form_Button_1">
    <span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation">
        <span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1">
            <span class="dijitReset dijitInline dijitIcon dijitIconTask" data-dojo-attach-point="iconNode"></span>
            <span class="dijitReset dijitToggleButtonIconChar">?</span>
            <span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">Simple</span>
        </span>
    </span>
    <input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
</span>

除了外跨度的类别......

没有悬停：

dijit dijitReset dijitInline dijitButton

悬停：

dijit dijitReset dijitInline dijitButton dijitButtonHover dijitHover

其他表单字段可能有所不同，但您必须查看这些字段。从我看到的一点点来看，我认为每个形式的dijit都有自己的悬停类。（/ p>）

dijitHover似乎是一个功能类，而不是UI类，因为我在Dojo 1.8.3 css或JS中找不到它：

d:\dev\js\dojo-release-1.8.3>findstr /i/s "dijithover" *.css
FINDSTR: // ignored

d:\dev\js\dojo-release-1.8.3>findstr /i/s "dijithover" *.js
FINDSTR: // ignored

但我可以找到dijitButtonHover：

d:\dev\js\dojo-release-1.8.3>findstr /i/s "dijitbuttonhover" *.css
FINDSTR: // ignored
dijit\themes\claro\claro.css:.claro .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\claro.css:.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\claro.css:.claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\form\Button.css:.claro .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\Toolbar.css:.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\Toolbar.css:.claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\nihilo\form\Button.css:.nihilo .dijitButtonHover .dijitButtonNode,
dijit\themes\nihilo\nihilo.css:.nihilo .dijitButtonHover .dijitButtonNode,
dijit\themes\nihilo\nihilo.css:.nihilo .dijitToolbar .dijitButtonHover,
dijit\themes\nihilo\Toolbar.css:.nihilo .dijitToolbar .dijitButtonHover,
dijit\themes\soria\form\Button.css:.soria .dijitButtonHover .dijitButtonNode,
dijit\themes\soria\soria.css:.soria .dijitButtonHover .dijitButtonNode,
dijit\themes\soria\soria.css:.soria .dijitToolbar .dijitButtonHover,
dijit\themes\soria\Toolbar.css:.soria .dijitToolbar .dijitButtonHover,
dijit\themes\tundra\form\Button.css:.tundra .dijitButtonHover .dijitButtonNode,
dijit\themes\tundra\Toolbar.css:.tundra .dijitToolbar .dijitButtonHover,
dijit\themes\tundra\tundra.css:.tundra .dijitButtonHover .dijitButtonNode,
dijit\themes\tundra\tundra.css:.tundra .dijitToolbar .dijitButtonHover,
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.claro .dojoxGridFBarInfoTD .dojoxGridFBarClearFilterBtn.dijitButtonHover .dijitButtonText {
dojox\grid\enhanced\resources\claro\Filter.css:.claro .dojoxGridFBarInfoTD .dojoxGridFBarClearFilterBtn.dijitButtonHover .dijitButtonText {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.claro .dojoxGridFBarInfoTD .dojoxGridFBarClearFilterBtn.dijitButtonHover .dijitButtonText {
dojox\grid\enhanced\resources\EnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\EnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\EnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\Filter.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\Filter.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\Filter.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\tundra\EnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\tundra\EnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\tundra\EnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\tundraEnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\tundraEnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\tundraEnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\layout\resources\RotatorContainer.css:.rotatorIcons .dijitButtonHover .previous{background-position:0 -16px;}
dojox\layout\resources\RotatorContainer.css:.rotatorIcons .dijitButtonHover .next{background-position:-16px -16px;}

Answer 2

Dojo按钮具有3个Html SPAN节点的层次结构层。只要鼠标进入按钮，只会更改顶部SPAN。附加两个CSS类：“dijitButtonHover”和“dijitHover”（如您在“无悬停”和“悬停”HTML标记中所示）。要在鼠标进入按钮时将Dojo Claro更改为您自己的设计，请尝试使用CSS选择器：

.claro .dijitReset.dijitInline.dijitButton.dijitButtonHover{}

如果您的CSS样式表中有其他具有较高特定权重的选择器，则可能无效。如果是这种情况，请将一些CSS类添加到上面的选择器中，以增加其权重。

Dojo Dijit Claro Theme禁用鼠标悬停

2 个答案: