I have a web page with links that look like:
<span>Home</span>
My link is displayed just as an icon (using pseudo elements), but when one hovers over it and waits for some time text also appears beside it. I created these states purely in CSS3 using transition delayed state changes.
a span {
text-indent: -1000em;
}
a:hover span {
text-indent: 0;
transition: text-indent 0 3s;
}
Here's a working example on JSFiddle.
But there are quirks that I'd like to resolve and would be especially happy to do that without Javascript if at all possible:
When using a mouse I would like to not show the span when user already clicks the action link (does something on page without redirecting elsewhere), because when user clicks the link they likely still stay on it with mouse cursor so delayed hover state still executes.
When taping the same link on a mobile device I would like to unhover from it so only click would be recorded.
Basically by resolving #2 I would resolve #1 as well when solution isn't device specific.
I'm not sure if it does the trick but you can use a:active and a:visited to hide the span
a:active span{
display: none;
}
a:visited span{
display: none;
}
Example
Related
First thing is, I can only edit the CSS/LESS portion of the code.
I've encountered a problem, there's a span that has a background color added on :hover and a different background upon clicking it, where it gets a class .active via JS.
Problem is, on iPad and iPhone on first tap it activates the :hover styles, a secondary tap is required to turn on the added class .active. Anyone knows how to ignore the :hover style and go straight to adding a class?
Much appreciated!
Place all your :hover rules in a #media block:
#media (hover: hover) {
a:hover { color: blue; }
}
Do this
a:hover {
background-color: transparent !important; /* If it works without adding !important, then do that. It's best to avoid !important */
}
Focus
This seems to be a known issue. Please check "https://getbootstrap.com/docs/3.3/getting-started/#support-sticky-hover-mobile" for more details. Few of the possible solutions to solve the above problem is "http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml"
In Chrome/Firefox (haven't looked in other browsers), my mouse clicks are showing the properties attached to the :focus selector. See http://jsfiddle.net/qtLoLf6p/1/
a:focus {
color: black;
text-decoration: none;
}
I'd like it to work just like the default blue outline works on anchor (a) tags, just on tab focus and not on click focus.
Note in my fiddle that i've just added the JS so the page doesn't change.
I'm alittle unclear on what you're trying achieve with the overall appearance however I would recommend looking to the :active selector.
When tabbing onto a link, the :focus selector is fulfilled, however when clicking on a link the :active selector is also fulfilled, this means you can set your styling for tabbing in :focus, and then override these styles with the mouse only properties in :active
The below example will give both the mouse click and the tab event different styling
a:focus {
color: #000;
text-decoration: none;
}
a:active {
color: #F00;
text-decoration: underline;
}
JSFiddle example here
Edit: An extract from CSS-Tricks explaining the purpose of :focus
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse
:focus selector explanation article
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
When using the CSS transitions for creating rollovers that fade in/out, is it better to place it under the a selector or the a:hover selector?
My instinct is to place it on the a:hover selector because that’s the active portion of the rollover but looking at examples, people seem to declare them after the a instead.
Both seem to work perfectly but I’d really like to know which is considered “correct”, and if possible, why.
So, this:
a { color:blue; transition:.5s; }
a:hover { color:red; }
Or this (my instinct):
a { color:blue; }
a:hover { color:red; transition:.5s; }
Thanks.
(Vendor prefixes intentionally omitted)
It depends on your needs, using the transition property below in a
a { color:blue; transition:.5s; }
Will transit the element when you mouseover/hover the element, as well as when you mouseout
Where this
a:hover { color:red; transition:.5s; }
Will transit the element only on hover, it will get back to normal the moment you take out the mouse.
Demo (Too and fro transition)
Demo 2 (Will transit only on hover and will be back to normal once the mouse is off the element)
Note: I've increased the transition time to show how it actually
matters.
Conclusion: Generally speaking, transition shouldn't be used on :hover as it won't transit when the mouse is taken out of the element. But as I said again, it depends on the needs.
I have found an irritating bug in IE 8-10 that prevents a parent's active state being triggered. It appears that if a child of the parent element is the target of the click event the active state on the parent element is not triggered.
Here is a working example. If you click the text inside the <li> the element wont change colour. If you click inside an <li> anywhere other than on the <p> child the element will turn blue.
This is a problem as it pretty much renders the css :active pseudo state useless in IE if the element has any children.
Has anyone encountered this problem before, and even better found a way round it?
Here's an easy workaround: add a css rule to the paragraph.
Working example
CSS
ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}
I have fixed the issue by preventing pointer-events on the child element. This way the :active state is triggered directly on the parent and doesn't need to be propagated. The only downside of this solution is you cannot attach an event listener (not even a css `:hover selector) to the child anymore. So you have to move all your event listeners to the parent.
.child { pointer-events: none; }
Here is jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
Just uncomment the last line in css and compare the result in IE and other modern browser
You could add another CSS selector for the <p> tag so your
li:active { background: blue; }
will become
li:active, li p:active { background: blue; }
I would suggest you would use javascript or jquery for that when you click a child element, perform the active state of of the parent.
I've stumbled upon this on IE11. I was writing a drag-n-drop styling logic using this approach suggested by Martin.
In my case I have a row with td cell elements and using :active for the parent tr does the job for other browsers. For IE, I've added a CSS rule to target the cells (tr.myRowClass > td:active) and modified the if condition in my custom JS logic executed during the mousemove event handler of the cells:
if (style.getPropertyValue('cursor') == 'auto' || document.querySelectorAll(":active").length > 0) {
The remaining task is to find the target element:
Determine which element the mouse pointer is on top of in Javascript