Изменить цвет выбранных якорей для разделов на сайте NO JAVASCRIPT - PullRequest
Новая
       41

Изменить цвет выбранных якорей для разделов на сайте NO JAVASCRIPT

0 голосов
/ 16 октября 2018

Итак, у меня есть несколько якорей секций внутри фиксированного заголовка.Я хотел посмотреть, есть ли какое-нибудь свойство css / trick / hack, о котором я не знаю, которое позволит мне изменить цвет якоря выбранного раздела при его выборе и, очевидно, вернуться к обычному стилю при выборе другого раздела.Я не уверен, возможно ли это вообще, но Я не могу использовать javascript - только css.Это все на одностраничном сайте, поэтому я не изменяю цвет на новой странице.

<header>
<ul>
<li><a href="#one">○</a></li>
<li><a href="#two">○</a></li>
<li><a href="#three">○</a></li>
<li><a href="#four">○</a></li>
<li><a href="#five">○</a></li>
</ul>
<header>

РЕДАКТИРОВАТЬ : новый подход.После некоторых исследований я решил поиграть с функцией: focus кнопок.

Вот что я получил:

HTML 

<button href="one" class="circle">○</button>
<button href="two" class="circle">○</button>
<button href="three" class="circle">○</button>
<button href="four" class="circle">○</button>

CSS 

.circle{
    background-color: none;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
}
.circle:focus {
    color: red;
    outline: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
}

Iдумал, что я мог бы использовать кнопки в качестве тегов привязки ... сбой.

1 Ответ

0 голосов
/ 16 октября 2018

Вы можете использовать: фокус. 

a:focus { 
    background-color: red;
}
...