I'm trying to style a hyperlink's state when it's tapped on a mobile device. Basically it has to flicker a green color right after being tapped. I've tried all the CSS pseudoclasses for hyperlink states, including:
a:active
a:hover
a:focus
But on my iPhone, the hyperlink doesn't show the intended style when tapped. Is there a better way through CSS or jQuery to accomplish this?
You might need to use a hack along with :active
Try adding this event handler to the <body> tag:
<body ontouchstart="">
Reference
Related
So, i made a website using Wordpress and elementor, I would like to change the image on the right when you hover on the label 'Carrello'. Basically when I hover on different drop-down menu labels, the ima should change accordingly on which link I'm hovering. That's the link of the website (don't look at anything else, I'm just doing some practice on Mega Menu).
That's my code (in this example I've just used display:none just to see if I can affect the other div but the goal should be change it) :
.megamenu22 .elementor-nav-menu li:nth-child(2):hover ~ .elementor-element-d0f1e73 img {display:none !important}
Thank you!
https://www.archless.it/
I have three html pages that can be visited through tags that are on the navbar
So, there is not a main layout that shares the same navbar. Each page has its own HTML5 but they share the same CSS file
When a certain page is getting visited, its page on the navbar has a class "active " (See below)
navbar at the index.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
navbar at the team.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
and so on for the history page
Each tag has been given CSS rules to be displayed like a button. (no bootstrap used)
What I tried to do is whenever I am on a certain page I want the tag to have a white background color. In order for the visitor to know which page is currently open.
Finally I have configured it with the following CSS rule
Solution
.active{
background-color: #FFFFFF;
}
Initially i tried to do it by using pseudo-class
1)
nav a:active{
background-color: #FFFFFF;
}
2)
nav a:active:before{
background-color: #FFFFFF;
}
3)
nav a:active:after{
background-color: #FFFFFF;
}
Also used :target pseudo class but did not work.
For those that marked 1, 2, 3 and did not work, i tried it as I read the documentation and having seen a proposed solution on fiddle.
Can someone tell me what is the difference between the solution that worked and the others that I tried allong with :target and did not work?
As long as you have three pages that each one has its own HTML code, the way you solved it is one that you could do it, elsewhere in order to use :target you had to move as follow
Specify on each <a> an id and that id to be lace also at the end of the href.
See bellow
<div class="side_col">
<a href="#sl1">
<div id="sl1" class="side_link">Accounts
</div>
</a>
<a href="#sl2">
<div id="sl2" class="side_link">Newsletter
</div>
</a>
<a href="#sl3">
<div id="sl3" class="side_link">Operator
</div>
</a>
<a href="#l4">
<a href="#sl4">
<div id="sl4" class="side_link">Invoice
</div>
</a>
</a>
And the CSS
#sl1:target:before, #sl2:target:before, #sl3:target:before, #sl4:target:before { background-color: #24BDE9; }
The :active pseudo-class is only applied to an element while it is considered to be active: for an anchor, that is typically for the time from when you click your mouse button on it until you release your mouse button. That is not a particularly long time!
Taking a look at your example, it would work like this:
User begins clicking the Home link. Their mouse button depresses, and that link becomes :active. Your CSS using the :active pseudo-class in a rule applies to it.
The user releases the mouse button. That link is no longer :active and your CSS using the pseudo-class stops applying.
Page navigation happens. That link that was :active certainly isn't any more! This is when your class would take over and you achieve that effect that you want.
:active has a very short duration tied literally to the element being interacted with by the user: they are making it :active by clicking on it and not releasing their mouse button. In your case, that interaction is brief and will not carry over during page navigation.
This is why using a class works: that class is there when the page loads, will always stay there (unless you change it programmatically), and gives you a way to apply your CSS like you want.
EDIT to answer a question on :target below.
:target matches an element by ID to the URL fragment. In your example, you aren't using IDs, nor are you using URL fragments, so there is nothing that would be considered a :target.
:target could work with a structure like this below, but it's going a long way to solve a problem best solved by classNames:
<nav>
Home
Teams
<a href="history.html#history" id="history>History</a>
</nav>
In the example above, each link has a fragment and an element with the ID matching the fragment (#home and the first nav item's ID, for example). In that case, you would have an element that would be considered a :target.
You used nav a:active{..., but active is the class, so your selector has to be nav a.active{... instead. (dot, not colon)
nav a.active { ... }
The only difference is saying a.active instead of a:active due to the fact that .active is a class. You can check out this w3schools link: (scroll down a bit to where it says "Active/Current Navigation Link")
Hopefully this helped!
I have a button like so:
When I hover over it, it looks like this:
When I click on it, it'll take me to a new tab that shows my resume. However, when I come back, there's an underline that I'd like to remove:
And I can and did remove it because I styled the :focus part of the button:
.resume-button:focus {
text-decoration: none;
color: #FFFFFF;
}
The problem arises when the user tries to hover over the link again. It's not hovering anymore because the link is still "clicked"; hence when I hover, the color of the text "Resume" remains white and won't change color until I click somewhere else to reset the link. How can I reset the state of the <a> without clicking on some other part of the website?
Try active and visited state to cover all possibilities. Sometimes link stays active after using browser back button, and links may be marked as visited during normal web browsing.
a:active, a:visited {
color: #fff;
}
Link can have four states:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - link in the moment when clicked
These are the pseudoclasses and they should be declared in this specified order, because in a timeline they can happen only one after other.
People tend to think some shortcuts helpful in remembering the right sequence for example: LoVeHAte.
Use :active selector instead. :focus is selected thing, :active is pressed thing.
the one you're looking for is :visited
a:visited{ /*styles */}
Use the :link selector to style links to unvisited pages,
the :hover selector to style links when you mouse over them,
and the :active selector to style links when you click on them.
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");
I have an image with buttons overlain on it. Because the buttons are semitransparent, and I don't want the labels to be, I've overlaid a span on each button (with 100% opacity). To make sure that the spans don't intercept all the clicks, I used the pointer-events: none; css property on the spans.
Here's the structure of the markup (Jade):
div.slide
div.controls.buttons
button.move.forward
button.move.back
button.info
div.controls.icons
span.move.forward.icon.ion-chevron-right
span.move.back.icon.ion-chevron-left
span.info.icon.ion-information
.icon.ion-* are styles for the ionicon icon font
It looks like this when rendered:
The problem is, that because I have pointer-events:none;, I can't use :hover or :active on the .icons span. Is there a way to propogate the click event to the element below without using pointer-events: none?
Am I going to have to put a listener on each button then trigger the click event using javascript? Or is there a nicer way?
Codepen example here