I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in the row, but it messed up the layout when hovering over other boxes. How can I achieve this without disrupting the layout?
Here is the HTML content:
<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>
And here is the CSS code:
.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; }