Removing background color after click - html

my link structure looks like this
<ul>
<li><span>home</span></li>
</ul>
but after clicking on the link shadow comes
i don't want that shadow, i want it to be normal without shadow
normal look when not clicked
When clicked shodow comes

If you could share your css we can give you more accurate answer.
but most likely you can prevent this behaviour using :focus or :visited pseudo class
it will be something like that
a:visited, a:focus {
box-shadow: none;
background-color: transparent;
}

Related

Is there a way to unset an 'a' tag link to the default color

I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.

Remove dotted line under button

I have a image button in my nav bar but I'd really like to remove the dotted line under the link.
The left arrow is the button which contains the link and as you can see under it tis dotted line appears.
This is the code for adding the navbar and button:
<div id="navbar"> <img src="images/bk.png" alt="Index"/>
I've tried:
<div id="navbar"> <img src="images/bk.png" alt="Index" onfocus="if(this.blur)this.blur()"/>
But it didn't seem to do anything.
From the limited information in the question, I'd suggest that you might be looking for:
#navbar :focus {
outline: none;
}
This selector will style all elements that are focused by the user that are descendants of the element with the id of navbar.
Bear in mind that it's better not to simply remove the outline, but offer an alternative styling to give those users that use the tab button to navigate a visual indication of where they are on the page.
For example:
#navbar :focus {
outline: none;
background-color: #ffa;
}

How can I change the color of the selected item in a menu?

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.

change subnav active link styling in squarespace

A not-super-advanced coder here.I'm seeking to "simply" adjust the styling of an active link in a sub-navigation on a site.
Example page:
http://printergatherer.com/shop
Referencing the minty green sub-nav that has "ALL ... PRINTS" in it.
Right now, I have styling that effects the active link in ALL navigations on the site. Ideally I have one set of styles for the main nav, and one for this sub nav.
I've managed to add a mint green underline to the active link, which is great, but for whatever reason I just CANNOT get the link color itself to change to the same mint green.
This code gets the bottom-border, but not the correct link color:
#categoryNav ul li.active-link {
color: #C6D4D0;
border-bottom: 1px solid #C6D4D0;
}
Sorry if I'm being a noob, I am about to tear my hair out about something that seems so simple!
You just need to move the color off of the li and on to the anchor tag like so:
.active-link a {
color: #c6d4d0;
border-bottom: 1px solid #c6d4d0;
}
you can see a jsfiddle of it working here:https://jsfiddle.net/24k1zep4/3/
your CSS is really specific, if you can't change that you may have to actually use a more specific selector.
#categoryNav .category-nav-links .active-link a {
color: #c6d4d0;
}
should work if you can't change the specificity and need to override what is already there.

a:active only briefly works (during mouse click)

For some reason, I made it so my text (a) that is active is bolded, but it is only active when it is clicked with my mouse, when it is released from the click, it turns off and the text goes back to it's normal state.
Why is this?
If you got to MSN, look at the text above their search bar. When you click on it, it bolds and turns orange. Without leaving the page. That's what I am trying to do.
HTML:
<div id="searchtopics">
<ul>
<li>Web </li>
<li>MSN </li>
<li>Images </li>
<li>Video </li>
<li>News </li>
<li>Maps </li>
<li>Shopping </li>
</ul>
</div>
CSS:
#searchtopics {
position:absolute;
margin-left:208px;
margin-top:38px;
}
#searchtopics a {
text-decoration:none;
float:left;
padding: 2px 6px 4px 6px;
color:rgb(100,100,100);
}
#searchtopics a:hover{
text-decoration:underline;
}
#searchtopics a:active{
color:rgb(100,100,100);
font-weight:bold;
}
#searchtopics ul {
display:inline;
list-style:none;
}
#searchtopics ul li {
display:inline;
color:rgb(100,100,100);
font-family:"arial", times, sans-serif;
font-size:12px;
}
That's because that link is only active hen you click it with the mouse. If you want the effect to last for the entire length of the mouse being over it use :hover. If you want it to last after the page has been visited use :visited.
edit
If you want the link to stay active when a new page is loaded you'll need to give that link a class that applies that style to it:
<li>Images </li>
#searchtopics a:active, a.active {
If you want to display link which contains to actually displayed content, there is no other solution than little javascript. Write some function to display content which will disable all other bolds, enable bold for current link and display the content.
There are four main states of a link:
a
a:hover
a:active
a:visited
a - is just when it is sitting there and it has never been clicked or in the processing of being clicked.
a:hover - this is kind of like the equivalent of a mouseover event in javascript (if you are familiar with that). when the pointer "hovers" over the link the style can be changed then.
a:active - this styling only shows up the split second that something is clicking on the link. This pseudo class is probably the least used by the general public for this reason.
a:visited - this styling shows up after a person clicks on a link.
So if you are trying to change the style of a link that is noticeable, I would recommend using a different pseudo class rather than a:active.
Hope this helps!
I know it's old topic but simple solution for it is to replace a.active instead of a:active , it did the trick for me so it should do for you aswell