Nampaknya setiap item hanya mempunyai sisi kanan dan bawah?

Saya fikir adalah lebih baik untuk menukar setiap item untuk mempunyai bahagian kiri dan bahagian bawah. Bagaimana pula dengan menetapkan warna sebelah kiri elemen bersebelahan apabila melayang?

Contoh:

*{
    box-sizing:border-box;
}
.wrap{
    width:300px;
    
}
.item{
    width:75px;
    float:left;
    text-align:center;
    border:1px solid #eee;
    border-right-width:0;
}
.item:last-child{
    border-right-width:1px;
}

.item:hover{
    border-left-color:red;
    border-bottom-color:yellow;
}
.item:hover + .item{
    border-left:1px solid yellow;
}
.item:last-child:hover{
    border-right:1px solid yellow;
}

<p class="wrap">
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
</p>

http://runjs.cn/detail/ibxy9qab

ul li:hover{
  border: 1px solid #ed9639;
}

kotak-bayang

Adakah ia disekat oleh li di sebelah kiri? Adakah yang paling kiri mempunyai tepi merah?

Sempadan-kiri tidak berfungsi?

Adakah kerana berat pemilih anda terlalu kecil dan ditimpa?

Apabila melayang, z-index perlu ditetapkan. Lebih tinggi daripada peringkat lain supaya sempadan anda tidak dilindungi

Terima kasih atas jawapan anda, saya telah menemui penyelesaian dan berkongsi dengan anda
http://www.jb51.net/css/14548...