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
Related
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;
}
I'm trying to create a guitar-related website and learn html and css in the process, but I've ran into a problem: I've created a list where all the elements are links and I'd like for them to be white but turn yellow when hovered over. I can't seem to accomplish both of these objectives at the same time. Either they're always white or they turn yellow when hovered over but otherwise stay purple.
I've tried creating the hover function as an id (using it only once, as you do with id's), creating a div with all the necessary classes, inserting the hover function into the ul list or into each of the list elements or into the link descriptions. Nothing has worked so far.
HTML and CSS (separate files):
<div class="ul2 alink1 ahover1 avisited1">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank"
>Electric guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Acoustic_guitar" target="_blank"
>Acoustic guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Semi-acoustic_guitar"
target="_blank" >Semi-acoustic/semi-hollow guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Guitar_synthesizer#MIDI_guitars"
target="_blank" >MIDI-guitars</a></li>
</ul>
</div>
</body>
.body {
background-color:black;
}
.alink1 a:link {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
.avisited1 a:visited {
color:white;
}
.ul2 {
list-style-type:circle;
color:white;
}
When it comes to pseudo selectors, they work in a specific order. So the the hierarchy is as follows:
:link
:visited
:hover, :focus
:active
What you want to achieve can be done with these simple modifications:
.alink1 a {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
Remove the a:visited selector from your CSS as it's not needed, remove the a:link and have it as an a tag only.
I believe this is what you are after.
I have a set of links in the left navigation panel. And I wanted to highlight the opened link. I'm using css for my website.
HTML code:
<div id="LEFTmenu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CSS code:
#LEFTmenu {
line-height:30px;
width: 200px;
float: left;
margin-top: 10px;
background-color: #FFFFFF;}
#LEFTmenu ul {
padding: 0;
margin: 0 0 20px 15px;
list-style: none;
list-style-type: none;
font-size: 14px; }
#LEFTmenu ul li a:link, a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333; }
#LEFTmenu ul li a:hover {
color: #CC3366; }
#LEFTmenu ul li a:active {
color: #33FFFF; }
By using a:active, the link will have this property only for a very short time of just one click on the link. But I'm expecting the link to be highlighted while its page is opened. Is there such feasibility in CSS?
The :active pseudo class is only for elements tht are currently in the selected stage. For example in the case of a button, the button could be red color , when you hover the mouse over it it turns to blue. Here you use the :hover pseudo class. Now when you click the button ( just left click down, dont release it yet) the button turns green. Now that is the :active pseudo class.
for what you are wanting, where the link is continuously highlighted when the page is opened and displayed, you can do it either using javascript or just plain css.
the simplest way, the plain css way is just have a class called "highlighted" and set some css property like background ans stuff like,
.highlighted{
background-color:#000;
color:#fff;
}
just apply the "highlighted" class to the link you want.For example, if you are on link2.html page then you want the "link2" in your ul list to be highlighted. So inside your link2.html page, in your ul element referencing the links, just apply the class to link2 like..
.highlighted{
color:#fff;
background-colo:#000;
}
<div id="LEFTmenu">
<ul>
<li>Link1</li>
<li class="highlighted">Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
This is the easiest css solution for what you want to achieve.
Now the javascript version of doing this is not difficult by any means, but a little more complicated than the just css approach. I say it is a little more complicated because you are dynamically going to manipulate the element properties. Now you do have to watch out for what you are doing bcause you might accidentally change some DOM property that you do not want to change but altogether it is not difficult.
now for javascript approach now you can decide to do this in native javascript or use some jquery or other libraries. Jquery makes writing the code simpler but you have to link the jquery source to you html file, which adds memory/file size to your page. This part I will let you decide what you want to do and how you want to proceed.
HopefullyI have shed some light into what you are wanting to do. Good luck
I'm new to HTML and CSS and I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey.
Now, I'm trying to implement that the field of the active page stays in that grey but it isn't working for me so far and I believe it's because of the HTML. On index.html nothing should be activated as I wont be using that page later. It's just the standard side.
For Example then I have Home.html, Contact.html and Forum.hmtl.
If I open Index.html in my browser and in my Navbar click on Home I will be navigated to the at the moment exact same page like Index.html, but on this page i want the home navfield to be highlighted. Do I have to (in the Home.html) state that this field is active? How do I do that.
NAV: (in home.html currently the same as in index.html)
<ul id="Navigation">
<li>IC Home</li>
<li>IC Forum</li>
<li>IC Contact</li>
</ul>
Do I have to put something which states that <li>IC HOME</li> is active?
This is how I did the hover effect in my css file:
ul#Navigation a:hover, ul#Navigation span
{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #adadad;
}
and I thought i could just do the same for active:
ul#Navigation a:active, ul#Navigation span
{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #adadad;
}
I'd really appreciate some help as I'm still new to this.
You must add a class to the active navigation element and styled it.
HTML:
<ul id="Navigation">
<li>IC Home</li>
<li>IC Forum</li>
<li>IC Contact</li>
</ul>
CSS:
ul#Navigation .active{
border-color: white;
border-left-color: black;
border-top-color: black;
color: white;
background-color: #adadad;
}
So on forum.html the active class will be on the IC Forum link.
For the contact.html will be on the IC Contact and so on...
yes you need to change the nav on every html page. or you need some script to detect what page it is on. active only applied the style on your mouseDown on the link.
<ul id="Navigation">
<li>IC Home</li>
<li>IC Forum</li>
<li>IC Contact</li>
</ul>
.activePage {
// different style here.
}
According to W3Schools
Definition and Usage The :active selector is used to select and style
the active link.
A link becomes active when you click on it.
To highlight current page in the navigation you need to add extra class to mark the element as the active page (current page). for example you will have
#navigation li a.current{
color: #ffffff;
background:#f1d74c;
}
and the html
<div id="navigation">
<li>
<a ...> other page</a>
</li>
<li>
<a class="current" ...>current page</a>
</li>
</div>
It's a server-side thing -- when rendering the page, add a class like "current" to the link. Then you can style it separately from the other links.
For example
StackOverflow renders the links with class="youarehere" when it points to the page you're already on.
Rather than just placing a class on a direct parent element, it can be beneficial to provide a base parent class on the body tag, allowing control over all elements within that page (if possible).
When doing that, you can use attribute selectors in CSS, like this and style as required:
.page-contact [href^="contact"] {
//do something
}
I have provided a low-level example, here:
http://codepen.io/seemly/pen/HIKlb
Also as you are new to HTML and CSS, take the following advice - there is no real need to use ID's in HTML for styling purposes. Ever. Use CSS classes instead.
I have problem while make menu using CSS. The problem is I would like to use :active to make my current button highlighted. But after tried so many times, I still can't find how to implement it in my code.
I use <li> tag inside <a> tag to make sure the button background and text color change while selected, because after tried to put <a> tag outside <li> tag the text color not changed when select the button, the text only change after I put the cursor into the text.
Need your help.
This is my CSS code:
a, body {
margin-top:-30px;
text-decoration:none;
}
#topmenu {
margin-left:170px;
cursor:pointer;
}
#topmenu li {
color:white;
list-style:none;
float:left;
margin-right:5px;
padding:20px 15px 10px 15px;;
box-shadow:1px 1px 1px grey;
-webkit-box-shadow:1px 1px 1px grey;
-moz-box-shadow:1px 1px 1px grey;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #004890);
background: -webkit-gradient(linear, left top, left bottom, from(#004890), to(#2F2727));
text-shadow: 1px 1px 1px #555;
}
#topmenu li:hover, #topmenu li:active
{
background: -moz-linear-gradient(100% 100% 90deg, #FED93A, #FEC13A);
background: -webkit-gradient(linear, left top, left bottom, from(#FEC13A), to(#FED93A));
color:black;
padding-top:30px;
}
#topmenu #home {
margin-right:10px;
}
#topmenu #logout {
background:#000;
color:white;
}
and this my HTML code:
<div id="topmenu">
<ul>
<img src="includes/menu/pics.gif" alt="" style="float:left;"/>
<li id="home">Home</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li id="logout">Logout</li>
</ul>
</div>
You are missing the point mates. The :active pseudo class does not work like this.
:active sitepoint CSS reference
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners
What he wants to acheive is apply styles to the current a which has nothing to do with the above "active pseudo-class".
There are many ways you could acheive this.
First
Second
Third
Fourth
I think the problem is that :active doesn't mean what you think it does.
:active triggers when you click on an element, but before you let up on the mouse button. See the CSS spec on dynamic pseudo classes.
Here's an example HTML page, with :active on both the <a> and <h1> elements, you'll see the text color changes to blue when you click and hold down the mouse button.
<html>
<head>
<style type="text/css">
a, h1 { color: red; }
a:active, h1:active { color: blue; }
</style>
</head>
<body>
<h1>headline</h1>
link
</body>
</html>
First of all you need to have the links inside the li items, like this:
<li>A</li>
That's the proper way of nesting them. Then you want to give the active list item a class="active" atribute and set the css styles for it that you want.
I was getting that issue too. So what I did is I added a class into the . For example in your case, I would have done this:
(1)Add a class named active in your HTML code as the first step.
<div class="topmenu">
<ul>
<img src="includes/menu/pics.gif" alt="" style="float:left;"/>
<a class="active" href="../folder/home.php"><li id="home">Home</li></a>
<li>A</li>
<li>B</li>``
<li>C</li>
<li id="logout">Logout</li>
</ul>
</div>
Secondly, what I did is I went to my CSS code and I would type in :
div.topmenu ul.active {`
`background-color:black;
color:white;
}
It worked for me. Hopefully, it helps you. Happy coding!
I'm fairly certain that :active only triggers on links (A tags). It doesn't (and shouldn't) work on arbitrary elements like LI.
I think there may be a way for you to work around this. Have you tried keeping structural properties (float, margin, etc.) on the LIs, but moving the visual properties (border, padding, colors, etc.) to the As? That way, you can just style #topmenu li a:hover, #topmenu li a:active, and so on.