Active link color is not changed when click on link

1 Views

I am working in WordPress.I have fetched multiple data from the database and put them into an anchor tag. When I click on the link then its color doesn’t change so I can not identify which link is active?

My CSS is:

Read More
.cd-popup-trigger:active {
    color: #000;
}

And my code is like this: 

<a href="0#" class="cd-popup-trigger" id="cd-popup-trigger_<?php echo $trow->ID; ?>">
     <span class="tooltip-home-item" title="<?php echo  get_post_meta( $trow->ID, 'wpcf-short-description', true );?>">
          <img src="<?php echo $url; ?>" alt="<?php echo $trow->post_title; ?>" width="20px" height="20px" />
          <label for="<?php echo $trow->post_name; ?>">
              <?php echo $trow->post_title; ?>
          </label>
     </span>
</a>

Moreover, I have used jQuery to display a popup box while clicking on it. And I have used tooltips on mouse over.
My website is here if you want to check it out. You can check it under food types on my site.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Well right now you are adding the css to your active state, and its working. But if you want to add styling so even after clicking it remains there, then you will have to add a class through jQuery. 

    jQuery('.cd-popup-trigger').click(function(){
     jQuery('.cd-popup-trigger').removeClass('active');
     jQuery(this).addClass('active');

});

    I haven’t tested it, but what it should do is assign a class next to “cd-popup-trigger”, and when you click on some other element, it will then remove the previous one and assign it to the new element.

    Now you just have to style this in your css

    .cd-popup-trigger.active label {
    color: red;
}

  3. A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

    Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

    The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.

    This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules.

    In order to style the appropriate links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

    Note: On systems with multi-button mice, CSS 3 specifies that the
    :active pseudo-class must only apply to the primary button; on
    right-handed mice, this is typically the leftmost button.