javascript - Bagaimana untuk mencapai kesan memaparkan sempadan merah pada hover tetikus

Question

Siapa yang telah melakukan kesan ini? ​​Ini adalah apa yang saya tulis, menggunakan border-right:1px solid #eee;border-bottom:1px solid #eee cara menggunakan ul li:hover{border-color:#ed9639;} apabila tetikus melayang Biarkan ada juga bingkai merah piksel di sebelah kiri

Answer 1

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

Answer 2

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

Answer 3

kotak-bayang

Answer 4

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

Answer 5

Sempadan-kiri tidak berfungsi?

Answer 6

Adakah kerana berat pemilih anda terlalu kecil dan ditimpa?

Answer 7

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

Answer 8

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