Suppose there are 4 blocks on the page and 1 block located absolute. How to make it so that when you hover on a black block, the block was on the right side of the black block.

div { width: 150px; height: 150px; background: #000; } .left { float: left; } .l_b { float: left; margin-top: 250px; } .right { float: right; } .r_b { float: right; margin-top: 250px; } .hover_bl { width: 50px; height: 50px; background: red; position: absolute; top: 60px; left: 158px; } 
 <div class="left"></div> <div class="right"></div> <div class="l_b"></div> <div class="r_b"></div> <div class="hover_bl"></div>

    1 answer 1

    You can like that

     #bl1{ float:left; width:50px; height:50px; background:#ccc; } #bl2{ float:right; width:50px; height:50px; background:#ccc; } #test{ width:20px; height:20px; background:red; display:block; position:absolute; } #bl1:hover ~ #test{ left:60px; } #bl2:hover ~ #test{ right:60px; }

    http://codepen.io/korolariya/pen/YWXNMN