在选定状态下更改伪元素颜色

Question

我想更改箭头颜色以及单击时的圆圈。我正在使用 LESS 并在正确的位置添加 border-top-color: #0066ff; 有人可以建议吗？这是代码：

少：

.circle {
    border-radius: 50%;
    box-sizing: border-box;
    width: 225px;
    height:225px;
    border: 6px solid #ff6600;
    border-radius: 50%;
    position: relative;
    cursor:pointer;
    &.selected {
        border: 6px solid #0066ff;
    }
    &:after {
        top: 104%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(136, 183, 213, 0);
        border-top-color: #ff6600;
        border-width: 10px;
        margin-left: -10px;
        transform: scaleY(1.6);
        &.selected {
            border-top-color: #0066ff;
        }
    }
}

HTML:

<div class="circle"></div>

JS:

$(document).ready(function(){
    $('.circle').on('click', function(){
        $(this).addClass('selected');
    });
});

JS fiddle 在这里：

https://jsfiddle.net/kunjsharma/6eu431hp/1/

Answer 1

你需要把:after放在.selected里面：see this fiddle

.circle {
    border-radius: 50%;
    box-sizing: border-box;
    width: 225px;
    height:225px;
    border: 6px solid #ff6600;
    border-radius: 50%;
    position: relative;
    cursor:pointer;
    &.selected {
        border: 6px solid #0066ff;
        &:after { // <-- moved this inside .selected
            border-top-color: #0066ff;
        }
    }
    // rest of the styles...
}

在选定状态下更改伪元素颜色

Change pseudo element color on selected state

less