php - trying to put an active hover to my custom nav category buttons

admin管理员组

文章数量:1292706

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I have a custom category buttons which each of buttons link and echoed the specific category at the same page. my goal is to put a active background hover color on the active link. here is my code so far:

<?php
  $args = array(
  'orderby' => 'slug',
  'order' => 'ASC',
  'parent' => 0,
  'hide_empty' => false
   );
  $categories = get_categories( $args );
  foreach( $categories as $category ){
  echo '<li><a class="ctg" href="' . get_category_link( $category->term_id ) .' ">' . $category->name . '</a></li>';
   }
   ?>

and my css:

    .ctg:hover {
      background: #A6EBF2;
    }
    .ctg:active {
      background-color: #A6EBF2;
    }

any help is appreciated.

---

here is the code I made so far:

$categories = get_categories( $args );
             foreach( $categories as $category ){
             $the_category_id = $category->term_id;
             if(function_exists('rl_color')){
                 $rl_category_color = rl_color($the_category_id);
             } else {
                 $rl_category_color = '#a6ebf2'; // bg color
              }
              echo '<li><a href="'. get_category_link( $category->term_id ) .'"  class="' . $category->slug . '" title="View all posts in '. esc_attr($category->name) . '" style="background-color:' . $rl_category_color .' ">' . $category->name . '</a></li>';
             

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I have a custom category buttons which each of buttons link and echoed the specific category at the same page. my goal is to put a active background hover color on the active link. here is my code so far:

<?php
  $args = array(
  'orderby' => 'slug',
  'order' => 'ASC',
  'parent' => 0,
  'hide_empty' => false
   );
  $categories = get_categories( $args );
  foreach( $categories as $category ){
  echo '<li><a class="ctg" href="' . get_category_link( $category->term_id ) .' ">' . $category->name . '</a></li>';
   }
   ?>

and my css:

    .ctg:hover {
      background: #A6EBF2;
    }
    .ctg:active {
      background-color: #A6EBF2;
    }

any help is appreciated.

---

here is the code I made so far:

$categories = get_categories( $args );
             foreach( $categories as $category ){
             $the_category_id = $category->term_id;
             if(function_exists('rl_color')){
                 $rl_category_color = rl_color($the_category_id);
             } else {
                 $rl_category_color = '#a6ebf2'; // bg color
              }
              echo '<li><a href="'. get_category_link( $category->term_id ) .'"  class="' . $category->slug . '" title="View all posts in '. esc_attr($category->name) . '" style="background-color:' . $rl_category_color .' ">' . $category->name . '</a></li>';
             

• php
• javascript

Share Improve this question edited May 11, 2021 at 17:37 Johansson 15.4k1111 gold badges4343 silver badges7979 bronze badges asked Apr 7, 2021 at 6:50 Marvin AcostaMarvin Acosta 111 bronze badge 1

• Where are you displaying these category links? On the site footer, a single post, on every page, the category archive? This context relates to how you determine, which of the category links should have the active class. – Antti Koskinen Commented May 12, 2021 at 10:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The :active is a selector for changing a link when clicked to show the act of clicking something. It causes some confusion when they called it "active"!

You need to add an .active class to show the current active element and style this differently.

Also, you can combine CSS with a comma

a.ctg:hover, 
.active {
  background: #A6EBF2;
}

Then you'll need some code for adding the .active to the active item, see the following:

Highlight Current Page in WordPress 3.0 Menus

Adding .active class to active menu item

本文标签： phptrying to put an active hover to my custom nav category buttons