I've menu with some links and when i'm clicking on them on mobile mode in chrome i see a blue background over my links.
I've tried outline:none on :hover ,:active & :focus on my links but its no luck.
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
color: #e6ebf6;
outline: none;
}
It looks like you are selecting the text so that you can copy and paste it somewhere. Use:
user-select: none;
When someone is actually viewing this on a mobile, this blue styling would not show unless they held their finger down so as to select the text.
was my problem too!
you should remove the highlight from your links try this:
-webkit-tap-higlight-color: transparent;
it worked for me!
Related
when I right-click on a hyperlink and select open new window then that link becomes blue with an underline. I want to remove this behavior.
I already search on the internet and find that using 'text-decoration: none;'
I can remove this happening but still it is happening.
I tried text-decoration: none; style at the level of the close on the direct 'a' tag inside HTML (style="text-decoration: none;") but still not working.
There are different states of link: Normal, Hover, Visited so I used 'text-decoration:note on Visited'
footer ul li a:visited{
text-decoration:none
}
in fact I used text-decoration:none at every possible code block,
but still only when I right click and select the link to open in new windows it turns blue underline
That's weird, try this?
a,
a:link,
a:visited,
a::before,
a::after {
text-decoration: none;
color: #000;
font-size: 2rem;
outline: none;
}
Be gone underline
I have modified the default appearance of links by changing a:hover and a:focus for links under a specific category:
.myclass > a:hover, a:focus {
color: limegreen;
}
Everything looks exactly as I want, except for one little behavior: when I open a link in a new tab, upon returning to the page I see that the link I clicked still shows the hover and focus style, even though the cursor is not on the link. I have to click elsewhere on the window (or even outside the browser window) to make it go away.
How can I make the link text/icon automatically return to their un-hovered unfocused state after the click by simply not having the cursor on the link?
I am hoping this can be done without resorting to JavaScript.
P.S. I am using Bootstrap v. 3.3.4.
P.P.S. Already tried using a:active, but that did not help.
Use a:active instead :focus
a:hover, a:active {
color: limegreen;
}
try me
You need to use the :active selector as well:
a:active, a:focus, a:hover {
color: limegreen;
}
After having read all dotted border questions possible, and not having found an answer, I write my question below.
How do i remove the dotted border around the div when i click on a link inside it?
This image shows the word "photography", which has a dotted border when clicked on.
The basics behind this is just a dropdown, that appears when that section is clicked on, which works absolutely fine, i just cannot stand that border, does my nut in.
Any ideas?
That's the focus state. Try to add this:
a:focus {
outline: none;
}
Or if that element isn't a real link, but for example just an li, make that
li:focus {
outline: none;
}
You can use below css property.
a, a:hover, a:active, a:focus {
outline: 0;
}
Please read this article - https://css-tricks.com/removing-the-dotted-outline/ and http://www.outlinenone.com/ for more clarification
as you can see on this jsfiddle, I'd like my active menu item to have a black rounded background (by "rounded" I mean similar to how it looks like with the hover effect).
For that purpose I have this piece of code
navbar-classic li a.active,
.navbar-classic li a:hover {
color: #fff;
background: black;
}
The issue is that even when I'm on index.html, my first menu item ("Index") still has a transparent background. Seems that li a.active is not taken into consideration.
What is the issue?
Many thanks,
It's because .active class is missing.
See this fiddle
Home
I have this site:
http://paul.dac-proiect.ro/index.php/about/
I want that when the user clicks on the menu item selected to have red.
I tried the code below but do not understand why do not work.
I found more information about this but I do not understand why the work is something wrong in writing code?
.navbar .nav > li > a:active{color:red;}
I am convinced that it is something very simple but fail to figure out what the problem.
You can help me solve this problem?
Thanks in advance!
Try this:
li.current_page_item > a {
color: #F00 !important;
}
:active pseudoclass is just a moment when you click and has mouse button down.
Active item in your case has class current_page_item, so:
.current_page_item > a {color: red;}
Add this in your style sheet and try.
a:hover, a:active {
outline: 0;
color: red !important;
}
Simplest (but limited since it's coloring all the visited links) is using the :visited selector, like the old days when visited links turned purple.
Other option would be to add a css class .active which applies the desired color. This could be done in plain HTML (then you have to configure this for every single page) or in PHP (by comparing current page with the URL; if it is the same, apply .active)
I suggested to add a class when navigation clicks.
For example :
Highlights
Add class to it when click
<a class="active" href="http://paul.dac-proiect.ro/">Highlights</a>
CSS
.active{
color : #f00;
}
This will work
li.current_page_item > a {
color: red !important;
}
because you used
li.current_page_item > a {
color: #000000 !important;
}
so you need to change color from #000000 to red.