0

現在、この設定を行っています。ボックスにカーソルを合わせると、下の境界線がカーソルを合わせたdivの内側と同じ色に変わるようにしたいと思います。これはcssだけではできないと思い始めていますが、これを行うためにJavaScriptをどのように追加しますか？

任意のガイダンスをいただければ幸いです

http://jsfiddle.net/hCK3D/7/

4

3 に答える 3

2

ホバーで下の境界線を削除し、代わりに要素の高さを1px大きくしてみませんか？（JavaScriptコードを追加する必要はありません）

このように：http： //jsfiddle.net/hCK3D/17/

更新：境界線も乱されません。

更新されたCSS：

.item-container {
    float:left;
    margin-top:20px;
    border-bottom: 1px #BCC0C3 solid;
    height:100px;
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border-left: 1px #fff solid;
    border-top: 1px #BCC0C3 solid;
    border-bottom: 1px #BCC0C3 solid;
    box-sizing: border-box;
}
.item:first-child {
    border-left: 1px #BCC0C3 solid;
}
.item:last-child {
    border-right: 1px #BCC0C3 solid;
}
.item:hover {
    background:#ECEFF4;
    border-left:1px #BDC0C5 solid;
    border-right:1px #BDC0C5 solid;
    border-bottom: 0;
    height:101px;
}
.item:hover + .item {
    border-left-width: 0;
}
于 2012-09-21T11:40:06.127 に答える
1

こういう意味ですか？

jsfiddle

.body{background:#ECEFF4;}
.item-container {
    float:left;
    border-top: 1px solid #BCC0C3;
    margin-top:20px;
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border-left: 1px solid #fff ;
    border-bottom: 1px solid #BCC0C3;
}

.item:first-child {border-left: 1px solid #BCC0C3;}
.item:last-child {border-right: 1px solid #BCC0C3;}

.item:hover {
    background:#ECEFF4;
    border-left:1px solid #BDC0C5;
    border-right:1px solid #BDC0C5;
    border-bottom: 1px solid #ECEFF4;
}

.item:hover + .item {border-left-width: 0;}
于 2012-09-21T11:41:25.070 に答える
1

divコンテナの境界線とアイテムの境界線をホバーで重ねます

投稿された他の回答とは異なり、このソリューションでは、下部の境界線を維持できます：http: //jsfiddle.net/hCK3D/15/ そして白い垂直線は引き続き正しく表示されます。

これで、アイテムに下からの境界線が設定され、アイテムにホバーすると、ホバーの色に合わせて下の境界線の色が変わります。また、コンテナの境界線は白い縦線の目的で設定されていますが、ホバーすると、アイテムのホバー境界線の下部がコンテナの境界線の前に表示されます。

ソースについてはJSFiddleを参照してください

于 2012-09-21T11:44:59.910 に答える