5

4 つのボックスが並んでいる (div) と想像してください。これらはメニューであり、1 つのボックスが選択されている場合、その境界線は赤になり、他のすべての div 境界線は黒になります。私が抱えている問題は、選択したdivに隣接するdivに、選択したdivに触れる側に黒い境界線がないようにする簡単な方法があるかどうかです。これは、選択した div に赤い境界線があり、2 番目の黒い線の境界線が不要になるためです。

2 つの div を 1 つの境界線であるかのように動作させるにはどうすればよいですか?

私はここで完成したものを手に入れようとしています。

http://jsfiddle.net/hCK3D/1/

現時点では、白い縦の境界線が横の灰色を遮っています。これはあってはならないことですが、それを変更する方法がわかりません。

4

4 に答える 4

9

+これを実現するには、CSS で隣接セレクター ( ) を使用する必要があります。それをチェックしてください、4つのアイテム：

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

これがあなたのCSSです：

​.item {
    float:left;
    background: #ccc;
    width: 50px;
    height: 50px;
    border: 1px #000 solid;
    border-right-width: 0;
}

.item:last-child {
    border-right-width: 1px;
}

.item:hover {
    border: 1px #f00 solid;
}

.item:hover + .item {
    border-left-width: 0;
}

<code>.item は、各項目を通常通りセットアップするだけです。右をborder0 にします。

.item:last-childこれは最後のものであり、境界線をシミュレートするためにその隣に div がないため、最後のものは右側にボーラーがあるようにします。

.item:hoverホバーしたアイテムに赤い枠を付け、4 つのサイズすべてを表示します

.item:hover +.itemリスト内の次の項目を取得し、左の項目のすぐ左に赤い境界線があるため、その左の境界線を取り除きます。

ここで試すことができます: http://jsfiddle.net/hCK3D/

編集：これでうまくいくはずです！http://jsfiddle.net/hCK3D/7/

于 2012-09-20T22:40:00.977 に答える
5

選択した divに負のマージン(境界線と同じ寸法)と単一の z-index を組み合わせて使用​​することで、探しているレイアウトを実現できます。

divの画像

<style>
   .box { 
     width: 50px;
     height: 50px;
     float: left;
     border: 5px solid black;
     margin-left: -5px;
   }

   .selected {
     position: relative;
     width: 50px;
     height: 50px;
     border: 5px solid red;
     z-index: 20;
   }
</style>

<div>
  <div class="box"></div>
  <div class="box selected"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

上記の方法は、IE7 以降のすべての主流ブラウザで信頼できるはずです... IE6 でも機能するはずですが、テストするために手元に用意する必要はありません。

于 2012-09-20T22:37:16.230 に答える
0

問題を解決する最も簡単な方法は、アクティブなdivに負のマージンを設定することです。コードは次のようになります

# HTML
​&lt;div class='menu'>
    <div class='item'>
        Item 1
    </div>
    <div class='item active'>
        Item 2
    </div>
    <div class='item'>
        Item 3
    </div>
    <div class='item'>
        Item 4
    </div>
</div>​

# CSS
.menu {
    position: relative;
}

.menu .item {
    display: inline;
    border: 1px solid black;
    position: relative;
    z-index:1;
}

.menu .item.active {
    border: 1px solid red;
    z-index: 2;
    margin: 0 -1px;
}

目的にdivを使用することは、私にはhtmlセマンティックに見えません。ナビゲーションにはリストを使うほうがいいと思います。

PSこれが実際のコードです– http://jsfiddle.net/r8XRP/ </ p>

于 2012-09-20T22:51:54.357 に答える
0

これを試してください

http://jsfiddle.net/D74mj/

それがあなたが要求した結果であることを願っています

于 2012-09-21T06:58:43.070 に答える