Sometimes (not always) when I click a menu element on my webpage's header an annoying selection box appears (see the picture). Can I hide it somehow? Why is it there at all?
https://i.imgur.com/HRrTpyV.png
Use outline:none to anchor tag class
you can try doing --
a:visited, a:hover, a:focus {outline: none}
Related
(I use bootstrap 3.3.7 on this one)
Hi. I wanted to have the effect on my bootstrap navbar, that in wherever section the user is (I use tags on my One-Page site), the text in the navbar is highlighted automatically just by scrolling. I already set up the dropping anchor links...
So with this additional attributes to the body tag it's working great so far
<body data-spy="scroll" data-target=".navbar-collapse">
...but there is one Problem. I ONLY want the TEXT in the navbar to seem active, highlighted. But as you can see on the picture (upper example), there is this kinda box now around the highlighted navbar link. It came from nowhere. How can I get rid of it, so only the text color is a bit lighter when it's active?
Look on the image here. The upper example is the problem now, and the bottom one is how I would like it, but with using scrollspy. So not that black box.
Greets and thanks a lot in advance my friends
You need to change the active state of the <a> tag to have a background of none. Bootstrap adds the class of active to the li containing the link when you scroll with scrollspy. So it would be something like the following:
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
background:none;
}
In the example above I included the hover and focus states as well but if you want to change those you can do on your own also by the colors in your image I am assuming that you are using navbar-inverse if you are using something else like navbar-default you will have to change that accordingly.
I have a chapter-navigation table, with about 50 entries, shown in blue per web custom. The text turns red on a:hover, because the active area is the text rather than the entire <td> area (despite efforts to make the whole area work), and green briefly on a:active. This much is intentional and working.
However, browsers remembers all visits and set a color which overrides my CSS until I clear its history. Is there a way to keep the browsers from messing with my links?
You should follow this order.
a:link
a:visited
a:hover
a:active
If you write a:hover below a:visited, it will not work.
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 see that when I press the tab key, links on the page aren't getting focused.
I expect the TAB key to mark the next html control (anchors, inputs), like in any other site:
Is it a html/css issue?
Pretty sure the default browser outline is being supressed, here is the code from the all.css file:
a:focus,
div:focus,
input:focus{outline:none;}
I have used this in some mobile websites, Android doesn't play nice sometimes with its element outlines.
EDIT:
Here is how I override the outline, straight from HTML5 Boilerplate:
a:focus { outline:thin dotted; }
a:hover, a:active { outline:0; }
This is indeed related to CSS. In your all.css on line 23 you remove the blue outline which normally highlights focused elements
a:focus, div:focus, input:focus{outline:none;}
If you want to have it highlighted, then you need to define some kind of styles. Or you just remove those lines and get the standard blue outline.
I'm trying to create a custom drop-down menu with html and css only.
I'm wondering if is possible to work with focus instead of hover? now is on hover and works but I want to expand that select onclick.
Here I have a fiddle example: http://jsfiddle.net/RwtHn/1084/
Don't use hover on the li, use hover on the a:
a:hover + ul, a:focus + ul, a:active + ul {}
DEMO
EDIT: Here's a demo: http://jsfiddle.net/RwtHn/1087/
Wow. I'm surprised this is even possible with just HTML/CSS.