не работает, чтобы сохранить стиль CSS в выбранной ссылке

Question

Я пытаюсь изменить внешний вид выбранной ссылки, но безуспешно. Он должен иметь тот же внешний вид, который определен при наведении ссылки.

Пытался использовать: focus в некоторых синтаксисах, таких как

.menuFAQ li: hover a, li: focus a {

но когда ссылка перестала зависать, стиль исчез.

Что я делаю не так?

body,
html {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.menuFAQ {
  background: #fff;
  font-family: Segoe ui, Calibri, sans-serif;
  font-size: 2em;
}

.menuFAQ ul {
  list-style-type: none;
  position: relative;
  margin-left: -40px;
  /* to avoid user agent chrome */
}

.menuFAQ li {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 49%;
  background: #fff;
  line-height: 80px;
  text-align: center;
  box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
}

.menuFAQ li a {
  display: block;
  color: #020062;
  background: #fff;
  text-decoration: none;
}

.menuFAQ li:hover a {
  color: #fff;
  background: linear-gradient(90deg, rgba(2, 0, 98, 1) 0%, rgba(89, 120, 167, 1) 50%);
}

:target {
  color: #fff;
  font-size: 1em;
}

div.items>div:not(:target) {
  display: none
}

div.items>div:target {
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #000;
  border: 1px solid #aaa;
}

<div class="menuFAQ">
  <ul>
    <li><a class='target' href="#typeA">typeA</a></li>
    <li><a class='target' href="#typeB">typeB</a></li>
  </ul>
</div>

<div class="items">
  <div id="typeA">
    <nav>
      A long and variable text size to explain TypeA
      <br>[...]
    </nav>
  </div>
</div>

<div class="items">
  <div id="typeB">
    <nav>
      A long and variable text size to explain TypeB
      <br>[...]
    </nav>
  </div>
</div>

Answer 1

Насколько я понимаю, вы хотите, чтобы стиль оставался после выбора ссылки, и курсор больше не зависает. В этом случае вы не сможете сделать это только с CSS, если хотите использовать цели в соответствии с: CSS: Использование: target для изменения css на нескольких идентификаторах

Однако, возможно, вам удастся избежать использования псевдо: active или получить джазовое выражение с некоторыми JS?

Обновление:

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

JS

Это очень элементарно, но если вы добавите это в нижней части вашего тела

<script>
    function selectActive(hash) {
        for (const element of document.querySelectorAll("li a")) {
            element.classList.remove("selected")
        }
        document.querySelector(`[href="${hash}"]`).classList.add("selected")
    }
    addEventListener("hashchange", () => {
        selectActive(window.location.hash);
    })
    selectActive(window.location.hash);
</script>

И добавьте .menuFAQ li a.selected в CSS вы можете получить ожидаемый результат

.menuFAQ li:hover a,
.menuFAQ li a.selected {
    color: #fff;

Я бы не стал использовать его в производстве, но это не слишком хорошая пища для размышлений:)

Answer 2

Вот как вы можете отслеживать активное состояние с помощью javascript.

const allTargetLinks = document.querySelectorAll('.target')

allTargetLinks.forEach(targetLink => {
  targetLink.addEventListener('click', () => {
    allTargetLinks.forEach(targetLink => {
      targetLink.classList.remove('active')
    })
    targetLink.classList.add('active')
  })
})

body,html{margin-left:auto;margin-right:auto;width:70%}.menuFAQ{background:#fff;font-family:Segoe ui,Calibri,sans-serif;font-size:2em}.menuFAQ ul{list-style-type:none;position:relative;margin-left:-40px}.menuFAQ li{display:inline-block;margin-top:10px;margin-bottom:10px;width:49%;background:#fff;line-height:80px;text-align:center;box-shadow:2px 3px 4px 0 rgba(170,170,170,1)}.menuFAQ li a{display:block;color:#020062;background:#fff;text-decoration:none}.menuFAQ li .active,.menuFAQ li:hover a{color:#fff;background:linear-gradient(90deg,rgba(2,0,98,1) 0,rgba(89,120,167,1) 50%)}:target{color:#fff;font-size:1em}div.items>div:not(:target){display:none}div.items>div:target{display:block;margin-left:auto;margin-right:auto;color:#000;border:1px solid #aaa}

<div class="menuFAQ"> <ul> <li><a class='target' href="#typeA">typeA</a></li> <li><a class='target' href="#typeB">typeB</a></li> </ul></div><div class="items"> <div id="typeA"> <nav> A long and variable text size to explain TypeA <br>[...] </nav> </div></div><div class="items"> <div id="typeB"> <nav> A long and variable text size to explain TypeB <br>[...] </nav> </div></div>

Answer 3

Если я правильно понимаю, вы хотите, чтобы ссылка сохраняла стиль состояния при наведении, если она нажата и, таким образом, отображает намеченную цель. Если это так, вы не можете сделать это с одним CSS. Вы можете использовать Javascript для добавления / удаления другого класса, который применяет тот же стиль. Использование jQuery:

$( document ).ready(function() {
    $(".target").click(function(){
        $(".target").removeClass('selected');
        $(this).addClass('selected');
    });
});

И CSS в вашем вопросе обновлено до

.menuFAQ li:hover a, .menuFAQ li a.selected  { color: #fff;
  background: linear-gradient(90deg, rgba(2,0,98,1) 0%, rgba(89,120,167,1) 50%);}