Question

我创建了一个包含多个框的弹出窗口。我想要做的是当用户悬停在任何“.deviceboxes”上时，特定的盒子宽度应该扩展，并且它应该在网页上的每个内容上都可见。为了达到这个目的，我写了“.deviceboxes：hover”只对第一行的行正常工作。但当我在其他盒子上盘旋时，它会扰乱布局。我该怎么做才能实现这个目标？

以下是我的HTML内容

<div class="modal-body">
    <div id="leftsection">
      <div class="deviceboxes">
            <div id="boxlabel_NetworkDevice_97" class="title">NetworkDevice_97</div>
                <div id="NetworkDevice_97_1" class="cmds">Command 1</div>
                <div id="NetworkDevice_97_0" class="cmds">Command 2</div>
            </div>

      <div class="deviceboxes mrgnleft">
        <div id="boxlabel_NetworkDevice_9" class="title">NetworkDevice_9</div>
        <div id="NetworkDevice_9_1" class="cmds"Command_1</div>
        <div id="NetworkDevice_9_0" class="cmds">Command_2</div>
      </div>
    </div>
</div>

以下是CSS：

.modal-body{ overflow: hidden; position: relative;} 
#fetch_commands{ left: 34% !important; width:1000px !important; height:500px; overflow: hidden;}
#leftsection{ float: left; width: 730px; height: 400px; overflow-y: scroll; overflow-x: hidden; min-height: 200px;}
#rightsection{position: relative; width: 200px; height: 400px; overflow-y: scroll; overflow-x: hidden; margin-left: 10px; padding-left: 20px; }
.netDevices { width:98%; padding: 5px 0px 5px 5px; cursor: pointer;}
.netDevices:hover {background: #406BA3; color: #FFF !important; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;}
.processing{ background: #006002; color: #FFF;}
.success{ background: none; color: #006002;}
.failed{ background: node; color: #FF0A16;}

.deviceboxes{ float: left; width: 215px; height: 200px; border: 1px solid #666; overflow-x: hidden;-webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;}
.deviceboxes:hover{ position:absolute !important; z-index:999999; width:500px !important; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;}
.title{ width: 100%; text-align: center; background: #000; color:#FFF; padding:10px; cursor: pointer;}
.cmds{ width: 195px; text-align: left; background: none; color:#000; padding:2px; margin-left: 5px; cursor: pointer; overflow-x: hidden; white-space: nowrap;}
.mrgnleft{ margin-left:10px; }
.mrgntop{ margin-top:10px; }
.navbar-inner { min-height: 65px!important; }

Answer 1

您可以进行两项简单的更改。

要补偿从215 - 500px增加的宽度，您可以设置负边距，以便将以下元素拉回到其原始位置。在这种情况下，它需要是215-500 = -285px。
接下来而不是使用position:absolute。您可以将position:relative用于所有.deviceboxes（不仅仅是悬停），因此它仍会对页面流产生一些影响。这也意味着z-indexing将按您的意愿运行。

作为备注，您只需将transition设置应用于基本状态，而不是hover，如果它们相同的话。只需保存几个位。

.modal-body {
    overflow: hidden;
    position: relative;
}
#fetch_commands {
    left: 34% !important;
    width:1000px !important;
    height:500px;
    overflow: hidden;
}
#leftsection {
    float: left;
    width: 730px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 200px;
}
#rightsection {
    position: relative;
    width: 200px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-left: 10px;
    padding-left: 20px;
}
.netDevices {
    width:98%;
    padding: 5px 0px 5px 5px;
    cursor: pointer;
}
.netDevices:hover {
    background: #406BA3;
    color: #FFF !important;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}
.processing {
    background: #006002;
    color: #FFF;
}
.success {
    background: none;
    color: #006002;
}
.failed {
    background: node;
    color: #FF0A16;
}
.deviceboxes {
    float: left;
    position:relative;
    width: 215px;
    height: 200px;
    border: 1px solid #666;
    overflow-x: hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}
.deviceboxes:hover {
    margin-right:-285px;
    z-index:999999;
    width:500px !important;
}
.title {
    width: 100%;
    text-align: center;
    background: #000;
    color:#FFF;
    padding:10px;
    cursor: pointer;
}
.cmds {
    width: 195px;
    text-align: left;
    background: none;
    color:#000;
    padding:2px;
    margin-left: 5px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
}
.mrgnleft {
    margin-left:10px;
}
.mrgntop {
    margin-top:10px;
}
.navbar-inner {
    min-height: 65px!important;
}

<div class="modal-body">
    <div id="leftsection">
        <div class="deviceboxes">
            <div id="boxlabel_NetworkDevice_97" class="title">NetworkDevice_97</div>
            <div id="NetworkDevice_97_1" class="cmds">Command 1</div>
            <div id="NetworkDevice_97_0" class="cmds">Command 2</div>
        </div>
        <div class="deviceboxes mrgnleft">
            <div id="boxlabel_NetworkDevice_9" class="title">NetworkDevice_9</div>
            <div id="NetworkDevice_9_1" class="cmds">Command_1</div>
            <div id="NetworkDevice_9_0" class="cmds">Command_2</div>
        </div>
    </div>
</div>

将div及其内容置于顶部：悬停而不会打扰其他内容

1 个答案: