显示层的问题

Question

如图显示的鼠标移动到左边的div里面，就会在右边显示任务详情那个div
鼠标移动到右边的div里面，就会在左边显示任务详情那个divjQuery

Answer 1

$('xxxxx').hover(function(){
 if( $(this).index()%2 ){
     alert("right" )
 }else{
   alert("left" )
 }


},function(){

});

Answer 2

<style>
.list{
width:240px;
height:500px;
margin:100px;
}
.list div{
 float:left;
 border:1px solid;
 width:100px;
 height:100px;
margin:4px;
}
#over{
  background:#fff;
  border:#ccf 1px solid;
 width:100px;
 height:100px;
 position: absolute;
 display:none;
}

</style>

<div class="list">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="over" >
111111111111
</div>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>


<script>
$('.list>div').hover(function(){
console.info($(this).index()%2 )
var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
$('#over').show().css( p )
},function(){
$('#over').hide()
});


</script>

Answer 3

var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个

Answer 4

var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个$(this).offset() 取当前元素坐标$(this).index()%2 // 左=0，右=1p.left+=$(this).index()%2? -w:w;
 左: 当前元素坐标left + w  右 : -w

Answer 5

var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个$(this).offset() 取当前元素坐标$(this).index()%2 // 左=0，右=1p.left+=$(this).index()%2? -w:w;
 左: 当前元素坐标left + w  右 : -w
大神还有一个问题，这个在IE下无显示无效果

Answer 6

var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个$(this).offset() 取当前元素坐标$(this).index()%2 // 左=0，右=1p.left+=$(this).index()%2? -w:w;
 左: 当前元素坐标left + w  右 : -w
大神还有一个问题，这个在IE下无显示无效果
你IE？我测试OK

Answer 7

大神还在不在啊
我发下HTML给你看看
<div id="content_game" class="content_game_L">
<div class="box_list">
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值，获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="box_info">
<div class="box_main">
<div class="box_img"></div>
<div class="box_info_title">
<h4>任务详情</h4><span>完成任务后审核十分钟，由系统自动发放奖励</span>
<div class="clr"></div>
</div>
<div class="box_info_list">
<table cellpadding="0" cellspacing="0">
<tr>
<th>步骤</th>
<th>人物等级</th>
<th>奖励</th>
<th>状态</th>
</tr>
<tr>
<td>1</td>
<td>游戏等级达到<span>10级</span></td>
<td><span>+100凤凰读书币</span></td>
<td><span>已完成</span></td>
</tr>
<tr>
<td>2</td>
<td>游戏等级达到<span>15级</span></td>
<td><span>+125凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>3</td>
<td>游戏等级达到<span>25级</span></td>
<td><span>+150凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>4</td>
<td>游戏等级达到<span>30级</span></td>
<td><span>+250凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>5</td>
<td>游戏等级达到<span>35级</span></td>
<td><span>+300凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>6</td>
<td>游戏等级达到<span>40级</span></td>
<td><span>+400凤凰读书币</span></td>
<td>未完成</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page">
<div class="page_main"><a href="#" class="prev"></a><a href="#" class="next"></a></div>
<div class="page_num"><span>1</span>/8</div>
<div class="clr"></div>
</div>
</div>我怎么调都调不好距上和距左的位置

Answer 8

jQuery.noConflict();
jQuery(function($){
$(".box_list>div").hover(function(){
$(this).css({"border-color":"#ff5b02"});
console.info($(this).index()%2 )
var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
$(".box_info").show().css(p).end();
},function(){
$(this).css({"border-color":"#DEDEDE"});
$(".box_info").hide();
});
});

Answer 9

 
jQuery(function($){
var boxs= $(".box_list .box");
    $(".box_list .box").hover(function(){
        $(this).css({"border-color":"#ff5b02"});
        var p=$(this).offset(),w=$(this).width()+10; //这个10 可以根据你实现的偏差量进行调整
        p.left+=  boxs.index(this) %2? -w:w;
        $(".box_info").show().css(p).end();
    },function(){
        $(this).css({"border-color":"#DEDEDE"});
        $(".box_info").hide();
    });
 });