javascript - Bagaimana untuk mencapai kesan memaparkan sempadan merah pada hover tetikus
过去多啦不再A梦
过去多啦不再A梦 2017-07-05 11:04:45
0
8
1235

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

过去多啦不再A梦
过去多啦不再A梦

membalas semua(8)
淡淡烟草味

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;
}
学习ing

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?

过去多啦不再A梦

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...

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!