I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>
Related
How do i make my button link to the next page without changing the styling?
<div class="image-round-fit">
<img src="images/pic.jpg" alt="photo" width="300px" height="300px" />
<span class="caption">Hello World</span></br>
Click Next
</div>
You can use CSS to do it. CSS is a language to style content in HTML.
a{
color: black;
text-decoration: none;
}
Click Next
The a is the tag name it is relating to. The color and text-decoration are properties. The color changes the text color and the text-decoration changes extras to the text, including if you want to include underline or not.
Or maybe it was this? To not change the color to purple permanently.
a:visited{
color: blue;
}
a:active{
color: red;
}
Click Next
The : stands for it relating to the a when in a condition. :visited stands for when you visited it, it will do whatever below. :active does whatever below when your mouse is down on the link. Remove the :active if you don't want it to change color at any state.
Firstly, you have role=button inside your class. It should be outside your class as an attribute :
Click Next
This is for assistive technologies and button element should be used instead when possible.
I have a react js application witch contains a select with a dropdown. I want to apply styles for 2 states: when the mouse hover the dropdown item and when the dropdown item is focused.
.select__option.select__option--is-focused {
background: blue;
}
.select__option:hover {
background: gray;
}
Both styles work. If the user will navigate within dropdown with keyboard arrow (up/down) the will be applied blue color on the item, if he will hover the item will be applied gray color as background. ISSUE: When user hover the focused item which has blue background, the hover color overrides the blue, but i want to not override blue color even the hover is applied over focused element, so the focused element should keep everytime its color. How to fix that? https://codesandbox.io/s/codesandboxer-example-forked-y4zs8?file=/example.tsx:0-505
Just switch elements in place (so that later overwrites previous) or make .select__option.select__option--is-focused:hover{background: blue} as rule too
.select__option:hover {
background: gray;
}
.select__option.select__option--is-focused {
background: blue;
}
<div class="select__option">
.select__option
</div>
<div class="select__option select__option--is-focused">
.select__option.select__option--is-focused
</div>
If nothing else helps, then just write a rule that does explicitly apply blue background color when both conditions are met - the element has those class names, and is hovered. You can combine both into one single rule, by simply listing both selector expressions comma separated.
.select__option.select__option--is-focused,
.select__option.select__option--is-focused:hover {
background: blue;
}
Try the not() pseudo class:
.select__option:not(.select__option--is-selected):hover {
background: gray;
}
My bad, i gave the wrong class in the not(). updated it
I'm trying to code a website and every time I edit the images there's a mouseover effect and I want to have a plain image on the webpage. The image is grayed out and when I mouseover it's not. How can I make it stay normal without having to mouseover? When I click, it opens a link and just opens the same page. SOS.<img src="images/image.jpg" alt="image" class="border2" />
If you have CSS stylesheets they may be causing the difference, use inspect element on it and see what styles are active and click on the :hov then the :hover button next to the filter bar in the styles tab to see how it changes. Then look at the style side with hover activated and see where, if any, there are places with :hover in their selector. Next find the place in your stylesheet where that selector is and copy its contents into the selector without :hover
Example
<button class="btn">Press Me</button>
which would then be styled by both:
.btn {
background-color: white;
}
.btn:hover {
background-color: blue;
}
this would mean that when not hovered the button is white but then becomes blue when you hover over it. A similar thing may be happening to your image with something along the lines of:
.border2 {
background:#ffffff;
opacity: 0.5;
}
.border2:hover {
opacity: 1;
}
found this on Grey out all images other than active hover image
I know there is an Active state but this appears and stays after I click on the button. Is there a way I can change the color of the button with CSS to show when the mouse is over the button and clicked only.
What I was thinking is something like a CSS selector for Focus and Active at the same time. Is there such a thing or way I could do this. This would be something like I see with the button on Stackoverflow but with a change in color when clicked that goes away when I move the cursor away.
Please check below examples and see if this is what you want.
JSFiddle1
input {
background: #2e9ec7;
}
input:active {
background: #2fa832;
}
<input type="submit"></input>
JSFiddle2
input {
background: #2e9ec7;
}
input:hover, input:active {
background: #2fa832;
}
<input type="submit"></input>
Hope this helps.
What I get from your question is that you want a button to change its colour once it has been clicked? If so you can try using JQuery which adds a css() function that allows you to change properties of elements. So, to change the background colour of a button once it has been clicked you could adapt the following code:
$("button").click(function(){
$(this).css("background-color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or else just use plain CSS:
button:hover:focus
Hopefully this helps!
Use mouseup and mousedown events if you can use jquery. On mousedown event set color of the button and on mouseup event set the color back to what is was before clicking it.
<input type="submit">
input {
background: blue;
}
input:active {
background: red;
}
When it's active, the color would be red. Except for that moment, it will be blue. Also, you could change only the text color by setting the color property instead of the background one.
I have made a div tabbable with the tabindex attribute to make hidden content accessible.
Currently when clicked with the mouse the div gets browser :focus styling.
Is there a way to have that tabbable element to only have focus styling when accessed via the keyboard? An anchor element has this by default.
Div with tabindex='0' gets browser focus styles on mouse and keyboard
interaction
Anchor gets browser focus styles on keyboard interaction
only
I would like the div to emulate the anchor. Making it an anchor is not an option though unfortunately.
Any help would be great, I'm genuinely at a loss.
Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/
Sure just add the :focus pseudo-class to the div, and style. I recommend using outline vs border. I updated the fiddle.
div:focus {outline: blue solid 2px;}
Kub suggested a JS solution, but why use js if you don't actually need to?
I've had great success using javascript to add/remove a class to the body that indicates if the user is using a mouse or a keyboard. Use those classes to style your focus states as you desire.
document.addEventListener("mousedown", () => {
document.body.classList.add("using-mouse")
document.body.classList.remove("using-keyboard")
})
document.addEventListener("keydown", () => {
document.body.classList.add("using-keyboard")
document.body.classList.remove("using-mouse")
})
The in the css you can do something like:
.using-mouse :focus {
outline: none;
}
.using-keyboard :focus {
outline: auto 5px blue;
}
I would suggest to don't be specific on tags like div, p, span
let's write one common selector to achieve this functionality for all the elements.
*:focus {
outline: blue solid 2px;
}
If you want to be specific then I would suggest this one.
*[tabindex]:focus {
outline: 2px green solid;
}
I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.
For those who are looking to override the tabindex focus style and preserve the original functionality of tabindex ie. show outline only when tab key is pressed and not on mouse click like if
:focus {
outline: 2px solid lime;
}
is used it will show outline on every element that is getting focus, but I found out that if I use
Change Tabindex Style - for all elements:
:focus-visible {
outline: 2px solid lime;
}
this will override the outline style of the tabindex on focus and preserve the tab outline functionality but with the new outline style.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
If you can use javascript, try use onclick attribute.
onclick="this.blur()" for lost focus
onclick="this.focus()" for set focus
Example where DIV on click lost focus and A is set focus http://jsfiddle.net/LvXyL/6/
Disadvantage is visible focus style if you hold mouse key for a longer time.