文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何调查前端

问如何调查前端
EN

Stack Overflow用户
提问于 2018-02-19 12:14:35
回答 1查看 152关注 0票数 2

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

​

​

它不是由我实现的，我想知道是什么导致的，当鼠标在它上面时，有一个额外的(在我看来是丑陋的)行：

​

​

有5个级别的DIVs (它实际上不是一个按钮)，下面的代码来自FF (只是为了您的想象，我无法更改它)：

代码语言：javascript
复制
<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在悬停- dijitHover和dojoxCheckedMultiSelectHover上有额外的CSS类。

我不知道如何在“规则”中检查这些内容，因为当我移动鼠标时，它就不见了(当然)。

我也试过在FF/Chrome中“悬停”选项，但这一行没有显示.

​

​

编辑1:

我尝试了我从outline: none中理解的东西

​

​

我把它设为最高层，但没有行为上的限制.

编辑2:

正如我在一篇评论中所写的，我不知道是哪个DIV引起了问题，我试过建议div:hover，但它仍然是一样的.

​

​

编辑3:

我也试过div { outline: none !important }和div { border: none !important }，仍然一样。

现在我明白了，在Chrome中，first div上有“事件侦听器”，但是JS被最小化了，我能用它做什么呢？

​

​

编辑4:

我找到了很好的指纹，但是JS似乎不是正确的检查(在我看来像是事件处理)。

代码语言：javascript
复制
            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;
            }
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-19 13:22:01

你的问题在这个div上--我想.dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper，看起来是这样的：

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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 > open选项卡上，然后在右上角，您将看到:hov为每个div > force元素状态:hover单击它，然后您将看到在一个divsfor:hover状态上添加的css )。

然后将其添加到div中，特别是这个div(用于：.dijit.dijitReset.dijitInline.dojoxCheckedMultiSelectWrapper状态)

示例：

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48866018

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档