bold text when clicked and unbold when other item is clicked
how to make the text bold after i clicked and not bold if i clicked the other item?
14 Replies
With the
:focus selector and the font-weight property.can be but i want it when i clicked the other item it will be back to normal and the other item will now become bold
Then apply the same rules to that item
but then it all will be bold?
Only the currently focused item will be bold
here is my html <div class="job-button">
<a class="job-headline first-headline" data-action="click->jobs#filterByJobType" data-job-type="Vollzeit">vollzeit</a>
<a class="job-headline" data-action="click->jobs#filterByJobType" data-job-type="Teilzeit">teilzeit</a>
<a class="job-headline" data-action="click->jobs#filterByJobType" data-job-type="Praktikum">praktikum</a>
</div>
i wouldnt do this. making text bold will cause the items to move around, which can cause situations where you put the mouse over an item and it flickers between :hover and not :hover
use other methods, like an outline, which doesnt change the size of the element
if you do this, you have to be extremely careful to avoid the flickering, and i dont have a good method of avoiding it
how do you make the focus here ? defined in css? <div class="job-button">
<a class="job-headline first-headline" data-action="click->jobs#filterByJobType" data-job-type="Vollzeit">vollzeit</a>
<a class="job-headline" data-action="click->jobs#filterByJobType" data-job-type="Teilzeit">teilzeit</a>
<a class="job-headline" data-action="click->jobs#filterByJobType" data-job-type="Praktikum">praktikum</a>
</div>
the focus is not applying to each button
:focus will only style those when the <a> is focused
you click ANYWHERE else, or press any key, and it will lose focus
no focus, no :focus
im done, thanks for the help
i have a feeling that you are trying to make links work like radio buttons
nope your advice for focus just work for me and thats waht im trying to achieve.thanks again
you're welcome