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

Question

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

#

Answer 1

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

我感覺改成每個項目都有左邊跟下邊，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

Answer 2

雷雷

Answer 3

盒子陰影

Answer 4

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

Answer 5

border-left不行嗎？

Answer 6

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

Answer 7

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

Answer 8

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