Geek Answers Handbook

Implementation issue: active in CSS button

I have a problem when creating a menu using CSS. The problem is that I would like to use: active so that my current button is highlighted. But after trying many times, I still cannot find how to implement it in my code.

I use the <li> tag inside the <a> tag to make sure that the button color and text color change when I select it, because after trying to place the <a> tag outside the <li> tag, the text color does not change when the button is selected, the text only changes after entering the cursor in the text.

You 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 is my html code:

 <div id="topmenu"> <ul> <img src="includes/menu/pics.gif" alt="" style="float:left;"/> <a href="../folder/home.php"><li id="home">Home</li></a> <a href="../folder/A.php"><li>A</li></a> <a href="../folder/B.php"><li>B</li></a> <a href="../folder/C.php"><li>C</li></a> <a href="../"><li id="logout">Logout</li></a> </ul> </div>
+2
source share
4 answers

You are missing points. Active pseudo-class does not work like that.

: link links to sitesite

This pseudo-class matches any element that is in the process of activation. This applies, for example, throughout the entire click of a link from the point at which the mouse buttons were clicked until its point was released again. The pseudo-class does not mean a link to the active or current page - it is a common misconception among CSS beginners

What he wants to achieve is to apply styles to the current a, which has nothing to do with the aforementioned “active pseudo-class”.

There are many ways to achieve this.

First

Second

Third

Fourth

+3
source

I think the problem is that: active does not mean that you think he is doing.

: Active triggers when you click on an item, but before you lower the mouse button. See the CSS specification for dynamic pseudo-classes .

Here is an example HTML page with: active on the <a> and <h1> elements, you will see that the text color changes to blue when you click and hold 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> <a href="#">link</a> </body> </html>
+3
source

I am sure that :active only works on links ( A tags). It does not work (and should not) work with arbitrary elements such as LI .

I think you might have a way around this. Have you tried to save the structural properties (float, margin, etc.) on LI, but moving the visual properties (borders, additions, colors, etc.) to As? That way you can just style #topmenu li a:hover , #topmenu li a:active , etc.

0
source

First of all, you need to have links inside li elements, for example:

 <li><a href="../folder/A.php">A</a></li>

This is the right way to invest them. Then you want to set the active element of the list a class = "active" attribute and set css styles for it.

0
source

More articles:


All Articles