两个div相交，怎样把相交处的border去掉

使其看起来像一个整体
function showdiv()
{  document.getelementById("b").style.display='block';
  document.getelementById("a").style.border="1px solid red";//两个div相交，怎样把相交处的border去掉就像京东网的http://www.360buy.com/ 左边的菜单一样
 
}
<div id="a"  onmouseover="showdiv()">
</div><div id="b"></div>

解决方案 »

  1.   

    css:
    border-left:solid 0px red
      

  2.   


    <style>
    .a { width:60px; height:40px; border:1px solid red; border-right:none; background:#eee; position:absolute; z-index:1; top:50px;}
    .b { width:120px; height:120px; border:1px solid red; position:absolute; left:50px; top:10px; background:#eee; position:absolute; left:68px; top:10px;}
    </style>
    <div class="a"></div>
    <div class="b"></div>
    这就是个 障眼法，，参考这个
      

  3.   

    这个不好使，如果border-top的长度太长会插入到div b中，没有遮住
      

  4.   

    两个div不只是border的位置相交，还有一部分区域也相交的
      

  5.   

    你设置一个div的z-index属性大于另外一个不就行了
      

  6.   

    z-index也设置了，但是不起效果。
      

  7.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    .wrap{
    position:relative;
    }
    .left{
    position:absolute; border:1px solid #C40000; border-right:0px; background:#FEF8EF; line-height:26px; width:100px; z-index:2;
    }
    .right{
    position:absolute; left:100px; top:0px; border:1px solid #C40000; background:#FEF8EF;
    width:200px; height:300px; z-index:1;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>
    </div>
    </body>
    </html>
      

  8.   

    学习了。LZ想实现像京东那样的效果 ，我试了一下，不知道可不可以这样实现：
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".left").mouseover(
    function(){$(".right").show();}).mouseout(function(){$(".right").hide()});

    }
    );
    </script>但是，当.right 隐藏之后 ，我要如何让.left的右边框是实线呢？我本来是想这样做的：$(".left").css("border-right","1px");  但是没有生效。求解
      

  9.   

    他们说的已经实现了呀
    完整代码如下：<!DOCTYPE HTML>
    <html>
        <head>
            <style type="text/css">
                .wrap {
                    position: relative;
                }
                
                .left {
                    position: absolute;
                    border: 1px solid #C40000;
                    border-right: 0px;
                    background: #FEF8EF;
                    line-height: 26px;
                    width: 100px;
                    z-index: 2;
                }
                
                .right {
                    position: absolute;
                    left: 100px;
                    top: 0px;
                    border: 1px solid #C40000;
                    background: #FEF8EF;
                    width: 200px;
                    height: 300px;
                    z-index: 1;
                    display: none;
                }
            </style>
            <script type="text/javascript" src="../js/jquery-1.7.min.js">
            </script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(".left").mouseover(function(){
                        $(".right").show();
                    }).mouseout(function(){
                        $(".right").hide()
                    });
                    
                });
            </script>
        </head>
        <body>
            <div class="wrap">
                <div class="left">
                    left
                </div>
                <div class="right">
                    right
                </div>
            </div>
        </body>
    </html>