dojo - Dojo Dijit Claro Theme 禁用鼠标悬停

Question

我一直在尝试更改 Dojo Claro 主题，因为它太轻了，我想摆脱一些效果。
其中之一是表单 dijit 的鼠标悬停。
一般来说，有什么方法可以禁用鼠标在按钮和输入（如文本框、过滤选择等）上的效果......当鼠标“越过”那些元素时，我无法在萤火虫上捕捉 css。应该有一个类将它附加到产生该效果的元素上。谁能告诉它是什么？谢谢

Answer 1

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

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

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

Answer 2

取自主题测试器的基本表单小部件选项卡上的Simple-Enabled-Button - http://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html ?主题=克拉罗。

没有悬停：

<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 都有自己的悬停类。

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;}