divのホバーをCSSの特定のシナリオに置く方法

Question

私はトリッキーな問題を解決したいと思います。私は固定位置に2 div（a、b）を持っています。そのうちの1つ（a）の中には、絶対位置にdiv（b）があります。私は黄色の部分に青いdivを入れたいと思う。ここで

はフィドルです：https://jsfiddle.net/k42wu2g3/3/

.left { 
 
    top: 0; 
 
    position: fixed; 
 
    width: 30%; 
 
    z-index: 2; 
 
    background: green; 
 
    left: 0; 
 
    height: 300px; 
 
    overflow: scroll; 
 
} 
 
.right { 
 
    top: 0; 
 
    position: fixed; 
 
    width: 69%; 
 
    z-index: 1; 
 
    background: yellow; 
 
    left: 30%; 
 
    height: 300px; 
 
} 
 
.hover { 
 
    background: blue; 
 
    position: absolute; 
 
    margin-left: 70px; 
 
    width:500px; 
 
}

<div class="left"> 
 
    LEFT CONTENT LEFT CONTENT 
 
    <div class="hover"> 
 
    DIV HOVER RIGHT 
 
    </div> 
 
    LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT 
 
    CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT 
 
    CONTENT LEFT CONTENTLEFT CONTENT LEFT 
 
    CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT 
 
    CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT 
 
    CONTENT LEFT CONTENT 
 
    <div class="hover"> 
 
    DIV HOVER RIGHT 
 
    </div> 
 
    LEFT 
 
    CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT 
 
</div> 
 
</div> 
 
<div class="right"> 
 
    RIGHT 
 
</div>

Answer 1

は、あなたが探しているものを、このですか？または、あなたは青いdivの絶対的な位置が必要ですか？

は

.left { 
 
    top:0; 
 
    position:fixed; 
 
    width:30%; 
 
    z-index:2; 
 
    background:green; 
 
    left:0; 
 
    height:300px; 
 
    overflow:scroll; 
 
} 
 
.right { 
 
    top:0; 
 
    position:fixed; 
 
    width:69%; 
 
    z-index:1; 
 
    background:yellow; 
 
    left:30%; 
 
    height:300px; 
 
} 
 
.hover { 
 
    background: blue; 
 
    position:fixed; 
 
    left: 30%; 
 
    top: 0; 
 
    right:0; 
 
    z-index: 5; 
 
    height: 300px; 
 
}

<div class="left"> 
 
LEFT CONTENT LEFT CONTENT 
 
<div class="hover"> 
 
DIV HOVER RIGHT 
 
</div> 
 
LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT 
 

 
</div> 
 
<div class="right"> 
 
RIGHT 
 
</div>

Answer 2

これは何が必要ですか？緑色の側から黄色い側にホバー上の青色のdivを削除しますか？

• 青い部分がいつ黄色の側に移動するかを明確にしていません。あなたは彼らが緑の側のホバー上で移動するか、または青のdivsをホバーするか、または黄色の側面をホバーするかどうか。
• ホバーの絶対位置を使用しているため、緑色から黄色の位置に変更すると、下のコードのように位置が変更されたときにオーバーラップします。だからあなたもそれを探していますか？あなたの質問を明確にしてください。

$(document).ready(function() { 
 
    $('.hover').hover(function() { 
 
    var element = $(this).detach(); 
 
    $('.right').append(element); 
 
    }); 
 

 
});

.left { 
 
    top: 0; 
 
    position: fixed; 
 
    width: 30%; 
 
    z-index: 2; 
 
    background: green; 
 
    left: 0; 
 
    height: 300px; 
 
    overflow: scroll; 
 
} 
 

 
.right { 
 
    top: 0; 
 
    position: fixed; 
 
    width: 69%; 
 
    z-index: 1; 
 
    background: yellow; 
 
    left: 30%; 
 
    height: 300px; 
 
} 
 

 
.hover { 
 
    background: blue; 
 
    position: absolute; 
 
    margin-left: 70px; 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="left"> 
 
    LEFT CONTENT LEFT CONTENT 
 
    <div class="hover"> 
 
    HOVER RIGHT 1 
 
    </div> 
 
    LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT 
 
    LEFT CONTENT LEFT CONTENT LEFT CONTENTLEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT 
 
    <div class="hover"> 
 
    HOVER RIGHT 2 
 
    </div> 
 
    LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT LEFT CONTENT 
 
</div> 
 
<div class="right"> 
 
    RIGHT 
 
</div>