CSS Triangle Hover Border Issue

Question

使用以下代码

<ul id="leftNavUl"> 
    <li><a href="#">Colors</a></li>
    <li><a href="#">Typography</a></li>
    <li><a href="#">Buttons</a></li>
    <li><a href="#">Main Navigation</a></li>
    <li><a href="#">Alerts</a></li>
    <li><a href="#">Data Tables</a></li>
</ul>

我希望悬停在右边每个边框的末尾显示一个三角形/箭头。

我已实现以下代码

#leftNavUl li:hover{
    display: inline-block;lock;
    position: relative;
    background: #97cce9;
    padding: 15px; width:100%;}

#leftNavUl li:after{
    content: '';
    display: block;  
    position: absolute;
    left: 100%;
    top: 0%;
    margin-top: -10px;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 30px solid #97cce9;
}

当悬停工作时，div的外部会显示一个额外的三角形/箭头。

Answer 1

你应该只在悬停状态下对after元素进行triger。

赞#leftNavUl li:hover:after

你在头等舱上输了一个拼写错误：显示：内联块; 锁定;

请参阅以下代码：https://jsfiddle.net/d6h0xtup/2/