javascript - 鼠標hover顯示紅色邊框這種效果怎么實現

問題描述

誰做過這種效果這是我寫的，使用border-right:1px solid #eee;border-bottom:1px solid #eee；鼠標懸浮時ul li:hover{border-color:#ed9639;}怎么讓左邊也有一像素紅框

問題解答

看起來好像每個項題主都只有右邊跟下邊？

我感覺改成每個項都有左邊跟下邊，hover的時候再通過設置相鄰元素的左邊顏色如何？

示例：

*{ 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;}回答3：

box-shadow

是不是被左邊的li擋住了的？最左邊的有紅邊么？

border-left不行嗎？

是不是你的選擇器 權值太小被覆蓋了

hover 的時候 要設置z-index。高于其它層級，這樣你的邊框才不會被覆蓋

感謝大家的回答，我已經找到解決辦法，分享給大家http://www.jb51.net/css/14548...