如何：将一个div悬停在另外两个div上，并使用JS / JQuery使其动态化？

I need to hover this div on 2 more divs, and this div additionally should go on its position dynamically maybe playing with the $(document).width();

我需要将这个div悬停在另外2个div上,而且这个div还应该动态地继续它的位置,也许可以使用$(document).width();

So, an example is the following:

所以,一个例子如下:

<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; }

That's what I should do, but you need to consider I have one more div in the bottom and this is what happens:

这就是我应该做的,但你需要考虑我在底部还有一个div,这就是发生的事情:

JSFiddle

So my question is, how can I position that div '#store' dynamically on that position (right) noting that it should hover all the divs and not make them go away as it actually does right now.

所以我的问题是,如何在该位置动态定位div'#store'(右),注意它应该悬停所有div而不是让它们像现在一样实际消失。

If you didn't get how the result should be, this link will help you understand it carefully.

如果您没有得到结果的结果,这个链接将帮助您仔细理解。

1 个解决方案

#1

Please check this code: JSFiddle

请检查以下代码:JSFiddle

What i understand from you i put here, please let me know if you want any more help.

据我所知,我放在这里,如果您需要更多帮助,请告诉我。

#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>

#1