如何:将另一个Div悬停在另外两个Divs上，并用JS/JQuery使其动态

Question

我需要在2个divs上徘徊此div，此div又应动态地在其位置上进行，也许可以使用$(document).width();

所以，一个例子是：

<div id="store">
     <div id="storeText">Store</div>
</div>
<div id="score">
     <div id="money">Money earned: 0</div>
     <div id="times">Bulbs charged: 0</div>
</div>

CSS

#score {
background-color: #aaaaaa;
width: 96%;
margin: 0;
padding: 10px 2% 10px 2%; }
#store {
float:right;
background-color: #c0c0c0;
width: 10%;
height: 200px;
margin: 0;
padding: 19px 2% 19px 2%; }
#storeText {
text-align: center; }

这就是我应该做的，但是您需要考虑我在底部还有一个Div，这就是发生的事情：

jsfiddle

所以我的问题是，我如何在该位置（右）动态定位div' #store'，并指出它应该悬停在所有的divs上，而不会像现在实际上一样消失。

如果您不明白结果的应该如何，则此链接将帮助您仔细理解。

Answer 1

请检查此代码：JSFIDDLE

我从您这里理解的内容，请让我知道您是否需要更多帮助。

#store {
    background-color: #aaaaaa;
    width: 96%;
    margin: 0;
    padding: 10px 2% 10px 2%;
}
#score {
    float:right;
    background-color: #c0c0c0;
    width: 100%;
    height: 300px;
    margin: 0;
   }
#storeText {
    text-align: center;
}
#div3 {
    float:right;
    background-color: red;
    width: 100%;
    margin: 0;
    height: 300px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    opacity: 0.4;
    
    padding: 10px 2% 10px 2%;
}

<div id="store">
    <div id="storeText">Store</div>
</div>
<div id="score">
    <div id="money">Money earned: 0</div>
    <div id="times">Bulbs charged: 0</div>
</div>
<div id="div3"></div>