自定義雪佛龍和圓滑塊上的圓圈 - 點擊後，圓圈消失

Question

我創建了自定義左和右雪佛圓圈，用於滑動滑塊轉盤，但是當我點擊左或右雪佛龍時，圓圈消失。當我去點擊圈子外面或點擊相反的V形圖標時，圈子會回來。我認爲它與覆蓋當前元素的僞類有關。有人可以幫我解釋我做錯了什麼嗎？我有一個工作JS Fiddle here。我不知道爲什麼CSS在這裏的代碼片段中沒有首先加載，所以你看不到它在這裏工作。檢查JSFiddle之一，謝謝。

$('.carousel-one').slick({ 
 
    arrows: true, 
 
    infinite: true, 
 
    speed: 1000, 
 
    slidesToShow: 1, 
 
    centerMode: true, 
 
    variableWidth: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
});

.slick-next:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-top: 2px solid #333; 
 
    border-right: 2px solid #333; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
.slick-prev:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-top: 2px solid #333; 
 
    border-right: 2px solid #333; 
 
    -webkit-transform: rotate(-135deg); 
 
    -moz-transform: rotate(-135deg); 
 
    -o-transform: rotate(-135deg); 
 
    transform: rotate(-135deg); 
 
} 
 

 
.slick-prev:hover, 
 
.slick-next:hover { 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    width: 45px; 
 
    height: 45px; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
} 
 

 
.slick-prev:hover { 
 
    padding-left: 8px; 
 
} 
 

 
.slick-next:hover { 
 
    padding-right: 8px; 
 
} 
 

 
.slick-next { 
 
    right: 20px; 
 
    padding-right: 8px; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    width: 45px; 
 
    height: 45px; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
} 
 

 
.slick-prev { 
 
    left: 20px; 
 
    padding-left: 8px; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    width: 45px; 
 
    height: 45px; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
 
<div class="carousel-one"> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> 
 
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> 
 
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> 
 
</div>

Answer 1

當單擊該按鈕被聚焦。有一個css僞選擇器:focus，它針對處於聚焦狀態的元素。你需要重寫像以下示例中的聚焦元素的現有樣式

.slick-prev:focus, .slick-next:focus { 
    background-color: rgba(255, 255, 255, 0.5) !important; 
}