Active link with CSS :active

Asked

Viewed 9,410 times

2

Guys, I usually make a php code inside my class="" to show in bold for example a specific menu that is active.

<div class="menu-up">
    <ul>
        <a href="index.php?url=menu"><li class="li-up fr <?php if ($_GET["url"]=="menu") { echo "active"; } ?>">MENU</li></a>
        <a href="index.php"><li class="li-up fr <?php if (!$_GET["url"]) { echo "active"; } ?>">HOME</li></a>
    </ul>
</div>

But now I learned of a :active, equal to :Hover and such in class, that when active it makes it different, but I could not make it work this :active, follows the link talking about him: http://www.w3schools.com/cssref/sel_active.asp

Follow my html with html and php code by doing the active gambit below: http://pastebin.com/7kLTYKAZ

Could someone help me make it work the same way I did the above code without using it?

php html css

  • Active is not a class, and I don’t think it does what it wants here. Take a look here and click with the mouse on the text: http://jsfiddle.net/X2537/

  • @Cachuera, :hover is an effect when the mouse hovers over a link, :active is the highlight given to an element when clicked. Both are properties of an element

1 answer

4

The problem here is a conceptual mistake.

To pseudo-class (That’s what it’s called) :active is used to identify one of the four states of a link, that is, if it corresponds to the moment you click on the link. The other pseudoclasses are:link, :visited and :Hover.

What your code does is insert a class in the tag li, which is basically an identifier, such as a id, only it can appear in several elements of the same HTML.

The main difference between the two things, is that the pseudo classes of the links are like state properties of the links, IE, every link will have this without you doing anything, and they can be accessed by CSS for stylization effect.

Of the four, only :Hover and :active can change during the display of a page, so we group link styles into two groups: 

a:link, a:visited

a:hover, a:active

The other major difference between classes and pseudoclasses is how they are used in the CSS. The classes (in fact) are symbolized with a point (.), while the pseudoclasses receive two points (:). For example:

a.exemplo:link, a.exemplo:visited { /* estilos */ }
a.exemplo:hover, a.exemplo:active { /* estilos */ }

Here to tag to ("Anchor", or link) is identified by the class .example, and by their respective states (:link and :visited, :Hover and :active)

To try, I suggest the following example:

<!DOCTYPE html>
<html>
  <head>
  <style>
    a:link    {color:#009;}
    a:visited {color:#090;}
    a:hover   {color:#900;}
    a:active  {color:#9f0;}
  </style>
  </head>
  <body>

    <p>Passe o mouse e clique aqui: <a href="">link de testes</a></p>

  </body>
</html>

Finally, about your code, it should work, but only to dynamically define a class for the li tag, but it will only be used by the CSS style, without any other implication.

  • Man, how stupid of me, I thought he did you know what, this here: http://css-tricks.com/almanac/selectors/a/active/ Ta seeing the menu over there HTML, CSS, RESULT, when you click on the top it turns orange with an arrow down, I was trying to do this, When you click on it, it’s fixed, just like I made it work in my code, but I wanted that little arrow down in orange. Vlw people, I understood the active well so it is just the exact omentum that clicks, it does not continue the effect. Speaking of which, someone knows how to do that?

  • Like the menu here on top of Stackfollow that also turns orange, that I know how to do, but is that the effect of the arrow down as it does? Is css that right? Has some specific property?

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.