Question

我有一个网页，我有两个单选按钮：

我没有实现它，我想知道是什么导致了什么，当鼠标结束时，还有一个（我认为很难看）行：

有5个级别的DIV（它不是真正的按钮），以下代码来自FF（只是为了你的想象，我无法改变它）：

<div class="dijit dijitReset dijitInline dijitLeft BPMHorizontalRadio dojoxCheckedMultiSelect" id="widget_dojox_form_CheckedMultiSelect_0" widgetid="dojox_form_CheckedMultiSelect_0">
    <div data-dojo-attach-point="comboButtonNode"/>
    <div data-dojo-attach-point="selectNode" class="dijit dijitReset dijitInline dojoxCheckedMultiSelectWrapper" data-dojo-attach-event="onmousedown:_onMouseDown,onclick:focus">
        <select class="dojoxCheckedMultiSelectSelect dojoxCheckedMultiSelectHidden" data-dojo-attach-point="containerNode,focusNode" style="-moz-user-select: none;" tabindex="0" id="dojox_form_CheckedMultiSelect_0">
            <option value="0" label="0" selected="selected"/>
        </select>
        <div data-dojo-attach-point="wrapperDiv">
            <div class="dijitReset dojoxMultiSelectItem dojoxCheckedMultiSelectSelectedOption" id="dijit__Widget_60" widgetid="dijit__Widget_60" aria-selected="true">
                <div class="dijit dijitReset dijitInline dojoxMultiSelectItemBox dijitRadio dijitRadioChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_60">
                    <input role="radio" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_60" style="-moz-user-select: none;" aria-labelledby="div_91_label dijit_form_CheckBox_60_radio_label" name="div_91_radiogroup" type="radio">
                </div>
                <div class="dijitInline dojoxMultiSelectItemLabel" data-dojo-attach-point="labelNode" data-dojo-attach-event="onclick:_onClick" id="dijit_form_CheckBox_60_radio_label">Admin System ID</div>
            </div>
            <div class="dijitReset dojoxMultiSelectItem" id="dijit__Widget_61" widgetid="dijit__Widget_61" aria-selected="false">
                <div class="dijit dijitReset dijitInline dojoxMultiSelectItemBox dijitRadio" role="presentation" widgetid="dijit_form_CheckBox_61">
                    <input role="radio" aria-checked="false" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_61" style="-moz-user-select: none;" aria-labelledby="div_91_label dijit_form_CheckBox_61_radio_label" name="div_91_radiogroup" type="radio">
                </div>
                <div class="dijitInline dojoxMultiSelectItemLabel" data-dojo-attach-point="labelNode" data-dojo-attach-event="onclick:_onClick" id="dijit_form_CheckBox_61_radio_label">Party ID</div>
            </div>
        </div>
    </div>
</div>

我注意到，ID为dojox_form_CheckedMultiSelect_0的div在悬停时还有其他CSS类 - dijitHover和dojoxCheckedMultiSelectHover。

我不知道如何检查＆＃34;规则＆＃34;中的那些，因为当我移动鼠标时它已经消失了（当然）。

我还试图＆＃34;：hover＆＃34; FF / Chrome中的选项，但该行未显示...

编辑1：

我尝试了outline: none：

的理解

我把它设置为顶级div，但行为没有变化......

编辑2：

正如我在评论中所写，我不知道哪个DIV导致了问题，我尝试过建议div:hover，但它仍然是相同的......

编辑3：

我还尝试了div { outline: none !important }和div { border: none !important }，仍然是一样的。

现在我知道，在Chrome中，有＃34;事件监听器＆＃34;在第一个div，但JS被最小化，我该怎么办？

编辑4：

我找到了漂亮的印刷品，但JS似乎不是正确的检查（在我看来就像事件处理一样）

            function _a83(type, _a84) {
                var _a85 = function(node, _a86) {
                    return on(node, type, function(evt) {
                        if (_a84) {
                            return _a84(evt, _a86);
                        }
                        if (!dom.isDescendant(evt.relatedTarget, node)) {
                            return _a86.call(this, evt);
                        }
                    });
                };
                _a85.bubble = function(_a87) {
                    return _a83(type, function(evt, _a88) {
                        var _a89 = _a87(evt.target);
                        var _a8a = evt.relatedTarget;
                        if (_a89 && (_a89 != (_a8a && _a8a.nodeType == 1 && _a87(_a8a)))) {
                            return _a88.call(_a89, evt);
                        }
                    });
                }
                ;
                return _a85;
            }

Answer 1

您的问题出在div我认为.dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper，如下所示：

#dijit__Widget_60, #dijit__Widget_61 {
  display: inline-block;

}

.dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper:hover #dijit__Widget_61, .dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper:hover #dijit__Widget_60 {
  border-top: 1px solid #efefef;
}

<div class="dijit dijitReset dijitInline dijitLeft BPMHorizontalRadio dojoxCheckedMultiSelect" id="widget_dojox_form_CheckedMultiSelect_0" widgetid="dojox_form_CheckedMultiSelect_0">
    <div data-dojo-attach-point="comboButtonNode"/>
    <div data-dojo-attach-point="selectNode" class="dijit dijitReset dijitInline dojoxCheckedMultiSelectWrapper" data-dojo-attach-event="onmousedown:_onMouseDown,onclick:focus">
        <select class="dojoxCheckedMultiSelectSelect dojoxCheckedMultiSelectHidden" data-dojo-attach-point="containerNode,focusNode" style="-moz-user-select: none;" tabindex="0" id="dojox_form_CheckedMultiSelect_0">
            <option value="0" label="0" selected="selected"/>
        </select>
        <div data-dojo-attach-point="wrapperDiv">
            <div class="dijitReset dojoxMultiSelectItem dojoxCheckedMultiSelectSelectedOption" id="dijit__Widget_60" widgetid="dijit__Widget_60" aria-selected="true">
                <div class="dijit dijitReset dijitInline dojoxMultiSelectItemBox dijitRadio dijitRadioChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_60">
                    <input role="radio" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_60" style="-moz-user-select: none;" aria-labelledby="div_91_label dijit_form_CheckBox_60_radio_label" name="div_91_radiogroup" type="radio">
                </div>
                <div class="dijitInline dojoxMultiSelectItemLabel" data-dojo-attach-point="labelNode" data-dojo-attach-event="onclick:_onClick" id="dijit_form_CheckBox_60_radio_label">Admin System ID</div>
            </div>
            <div class="dijitReset dojoxMultiSelectItem" id="dijit__Widget_61" widgetid="dijit__Widget_61" aria-selected="false">
                <div class="dijit dijitReset dijitInline dojoxMultiSelectItemBox dijitRadio" role="presentation" widgetid="dijit_form_CheckBox_61">
                    <input role="radio" aria-checked="false" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_61" style="-moz-user-select: none;" aria-labelledby="div_91_label dijit_form_CheckBox_61_radio_label" name="div_91_radiogroup" type="radio">
                </div>
                <div class="dijitInline dojoxMultiSelectItemLabel" data-dojo-attach-point="labelNode" data-dojo-attach-event="onclick:_onClick" id="dijit_form_CheckBox_61_radio_label">Party ID</div>
            </div>
        </div>
    </div>
</div>

现在修复一下只是为了查看是否是这种情况，（在编辑3 ＆gt;打开样式标签然后在右上角你会看到:hov点击它div＆gt;强制元素状态:hover然后你会在:hover状态的其中一个div上看到 css 。）

然后将此添加到该div中，尤其是此div（用于：悬停状态），.dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper

示例：

#dijit__Widget_60, #dijit__Widget_61 { display: inline-block; } .dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper:hover #dijit__Widget_61, .dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper:hover #dijit__Widget_60 { border-top: 1px solid #efefef; } .dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper:hover #dijit__Widget_61, .dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper:hover #dijit__Widget_60 { border: none !important; }

<div class="dijit dijitReset dijitInline dijitLeft BPMHorizontalRadio dojoxCheckedMultiSelect" id="widget_dojox_form_CheckedMultiSelect_0" widgetid="dojox_form_CheckedMultiSelect_0"> <div data-dojo-attach-point="comboButtonNode"/> <div data-dojo-attach-point="selectNode" class="dijit dijitReset dijitInline dojoxCheckedMultiSelectWrapper" data-dojo-attach-event="onmousedown:_onMouseDown,onclick:focus"> <select class="dojoxCheckedMultiSelectSelect dojoxCheckedMultiSelectHidden" data-dojo-attach-point="containerNode,focusNode" style="-moz-user-select: none;" tabindex="0" id="dojox_form_CheckedMultiSelect_0"> <option value="0" label="0" selected="selected"/> </select> <div data-dojo-attach-point="wrapperDiv"> <div class="dijitReset dojoxMultiSelectItem dojoxCheckedMultiSelectSelectedOption" id="dijit__Widget_60" widgetid="dijit__Widget_60" aria-selected="true"> <div class="dijit dijitReset dijitInline dojoxMultiSelectItemBox dijitRadio dijitRadioChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_60"> <input role="radio" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_60" style="-moz-user-select: none;" aria-labelledby="div_91_label dijit_form_CheckBox_60_radio_label" name="div_91_radiogroup" type="radio"> </div> <div class="dijitInline dojoxMultiSelectItemLabel" data-dojo-attach-point="labelNode" data-dojo-attach-event="onclick:_onClick" id="dijit_form_CheckBox_60_radio_label">Admin System ID</div> </div> <div class="dijitReset dojoxMultiSelectItem" id="dijit__Widget_61" widgetid="dijit__Widget_61" aria-selected="false"> <div class="dijit dijitReset dijitInline dojoxMultiSelectItemBox dijitRadio" role="presentation" widgetid="dijit_form_CheckBox_61"> <input role="radio" aria-checked="false" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_61" style="-moz-user-select: none;" aria-labelledby="div_91_label dijit_form_CheckBox_61_radio_label" name="div_91_radiogroup" type="radio"> </div> <div class="dijitInline dojoxMultiSelectItemLabel" data-dojo-attach-point="labelNode" data-dojo-attach-event="onclick:_onClick" id="dijit_form_CheckBox_61_radio_label">Party ID</div> </div> </div> </div> </div>

最后，如果您发现它已从css文件中删除，!important仅用于测试目的。

如何调查前端

1 个答案: