使悬停盒固定

Question

我想要修复这些盒子，所以当你将鼠标悬停在一个盒子上时，这个盒子一直保持不变，直到你将鼠标悬停在另一个盒子上，这样当你在开放空间中点击时盒子就会保持不变。

到目前为止

代码：

CSS

.popbox1 {
display: none;
z-index: -1;
width: 1350px;
height: 275px;
text-align: left;
padding: 10px;
background: transparent;
color: #FF6600;
font-size:18px;
border: 0px solid #4D4F53;
margin: 18px;
margin-left:42px;
margin-left:auto
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);}

.popbox2 {
display: none;
z-index: -1;
width: 1350px;
height: 275px;
text-align: left;
padding: 10px;
background: transparent;
color: #FF6600;
font-size:18px;
border: 1px solid #4D4F53;
margin: 19px;
margin-left:-210px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);}

.popbox3 {
display: none;
z-index: -1;
width: 1350px;
height: 275px;
text-align: left;
padding: 10px;
background: transparent;
color: #FF6600;
font-size:18px;
border: 1px solid #4D4F53;
margin: 19px;
margin-left:-460px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);}

.popbox4 {
display: none;
z-index: -1;
width: 1350px;
height: 275px;
text-align: left;
padding: 10px;
background: transparent;
color: #FF6600;
font-size:11.5px;
border: 1px solid #4D4F53;
margin: 18px;
margin-left:-715px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);}

.popbox5 {
display: none;
z-index: -1;
width: 1350px;
height: 275px;
text-align: left;
padding: 10px;
background: transparent;
color: #FF6600;
font-size:18px;
border: 1px solid #4D4F53;
margin: 16px;
margin-left:-965px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);}


.popbox6 {
display: none;
z-index: -1;
width: 1350px;
height: 275px;
text-align: left;
padding: 10px;
background: transparent;
color: #FF6600;
font-size:18px;
border: 1px solid #4D4F53;
margin: 17px;
margin-left:-1215px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);}

.popbox1 h2 {
background-color: #4D4F53;
color:  #FFFFFF;
font-size: 20px;
height: 30px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;}

.popbox2 h2 {
background-color: #4D4F53;
color:  #FFFFFF;
font-size: 20px;
height: 30px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;}


.popbox3 h2 {
background-color: #4D4F53;
color:  #FFFFFF;
font-size: 20px;
height: 30px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;}


.popbox4 h2 {
background-color: #4D4F53;
color:  #FFFFFF;
font-size: 20px;
height: 30px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;}


.popbox5 h2 {
background-color: #4D4F53;
color:  #FFFFFF;
font-size: 20px;
height: 30px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;}


.popbox6 h2 {
background-color: #4D4F53;
color:  #FFFFFF;
font-size: 20px;
height: 30px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;}

的javascript

<script>
$(function() {
var moveLeft = 0;
var moveDown = 0;
$('a.popper').hover(function(e) {


    var target = '#' + ($(this).attr('data-popbox'));

    $(target).show();
    moveLeft = $(this).outerWidth();
    moveDown = ($(target).outerHeight() / 2);
}, function() {
    var target = '#' + ($(this).attr('data-popbox'));
    $(target).hide();
});

$('a.popper').mousemove(function(e) {
    var target = '#' + ($(this).attr('data-popbox'));

    leftD = e.pageX + parseInt(moveLeft);
    maxRight = leftD + $(target).outerWidth();
    windowLeft = $(window).width() - 40;
    windowRight = 0;
    maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

    if(maxRight > windowLeft && maxLeft > windowRight)
    {
        leftD = maxLeft;
    }

    topD = e.pageY - parseInt(moveDown);
    maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
    windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
    maxTop = topD;
    windowTop = parseInt($(document).scrollTop());
    if(maxBottom > windowBottom)
    {
        topD = windowBottom - $(target).outerHeight() - 20;
    } else if(maxTop < windowTop){
        topD = windowTop + 20;
    }

    $(target).css('top', topD).css('left', leftD);

});});

基本上我有6张图片，当你将鼠标悬停在1以上时会出现一个文本框但是只要你将鼠标移动到一个空白区域，该框就会消失。其中一个文本框需要滚动条，但在您单击滚动条之前框会消失。悬停在框上后应该固定该框，以便您可以使用滚动条。

任何帮助将不胜感激！