If I understand correctly, you want the link to retain the style of hovered state if it’s clicked and thus displays its intended target. If so, you cannot do that with CSS alone. You could use Javascript to add/remove another class that applies the same style.
Using jQuery:
.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%);}
Solution 2 :
By what I understand you’r wanting the style to stay after the link is selected and the cursor is no long hovering. If this is the case, you are not able to do it with CSS alone if you want to use targets as per: CSS: Using :target to change css on multiple ID’s
However you maybe able to get away with using the :active pseudo or get jazzy with some JS?
Update:
I couldn’t get :active to work, might have to use JS…
JS
This is very rudimentary but if you add this on the bottom of your body
<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>
And add .menuFAQ li a.selected in CSS you could get the expected result
.menuFAQ li:hover a,
.menuFAQ li a.selected {
color: #fff;
I wouldn’t use it in production but it is deff food for thought 🙂
Solution 3 :
Here is how you could track the active state with javascript.
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>
Problem :
I’am trying to change the appearance of a selected link, without success.
It should has the same appearence defined when the link is hovered.
Tried to use :focus in some syntaxes like
.menuFAQ li:hover a, li:focus a {
but, when the link lost the hover, the style gone.
<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>
Comments
Comment posted by ksav
When you click on the link, the focus moves to the target div. So you would not be able to achieve this with CSS alone.
Comment posted by josiperez
Hmmm, I understand – it is logic. Thank you.
Comment posted by josiperez
Thank you Neibesh and sorry for my bad English. Yes, it is exactly what you understand. And the indicated link do what I need! I will try it!
Comment posted by Neibesh
Hopefully the scripts above helps 😛
Comment posted by josiperez
I tried the link, but has the same problem: can not change style of the selected item. I think i really must to use javascript or jquery. ksav coded a ready script that is working. Thank you for your help.
