How to make each category have its own a:hover?

  • Hi,

    I’m working on a page where I want people to see a different hover background when they hover a category.

    I know how to do this via simple HTML+CSS, or how to setup a:hover function in WordPress for all of the categories, but how do I setup an individual picture for each category?

    Example:

    Category1 hover:a – picture1
    Category2 hover:a – picture2
    Category3 hover:a – picture3
    etc etc

    I think a solution would be to develop a custom category code, which is what I want to do, but not sure how to do it. Like I tried to add custom HTML text widget, but did not succeed in styling that widget via stylesheet.

    Whats the most effective way to do this?

    I’m using twenty twelve child theme.

Viewing 8 replies - 1 through 8 (of 8 total)

  • In what context is this photo being used? Is it like in navigation or something with all the categories listed? Because I’m sure the menu has css classes appended to it automatically.

    umm… or you might be able to use javascript to change the background class based on what it’s hovering over. Might be able to help a little more if I understood exactly how this bg image is being displayed.

    Thread Starter BLuu123

    (@bluu123)

    Its a roof system’s site.

    Articles are with photos of products and info about them.
    So the categories are like a catalog. What I want is to display a picture whenever someone hovers a category, because there are many categories, so the picture would show/explain what exact products are in a category.

    I know how to do this via simple css, and I dont know anything about javascript, so I dont really wanna use Javascript.

    Thread Starter BLuu123

    (@bluu123)

    Ok, I think this is not possible via a css in a stylesheet?

    So I guess JavaScript is my only option.

    Twenty Twelve uses body_class() and post_class() which give you category specific css classes;

    https://codex.www.ads-software.com/Function_Reference/body_class
    https://codex.www.ads-software.com/Function_Reference/post_class

    example:

    .category-what-ever a:hover { background: url(images/category-what-ever-image.jpg) left top no-repeat; }

    see a different hover background when they hover a category.

    does this refer to a menu item or any link in the post?

    Thread Starter BLuu123

    (@bluu123)

    Refers to category widget.

    Thank you, that definitively should work. Problem is, I don’t understand how exactly to input that code.

    I tried adjusting this code –

    .category-what-ever a:hover { background: url(images/category-what-ever-image.jpg) left top no-repeat; } to my names, but wont work. Also tried a bunch more ways.

    Category name is “Piemers2”, category ID 2.

    Also, do I have to add any code to the categories.php or sidebar.php files?

    the categories widget outputs these css classes;

    example:
    .cat-item
    .cat-item-152

    the number is the category ID.

    so you could try to use:

    .cat-item-152:hover { background: url(/images/picture1.jpg) left top no-repeat; }

    the above goes either into style.css of a child theme of Twenty Twelve, or into the custom css:

    for changes to the default theme Twenty Twelve, either create a child theme
    or for just formatting changes, use a custom css plugin https://www.ads-software.com/extend/plugins/search.php?q=custom+css

    Thread Starter BLuu123

    (@bluu123)

    Thank you, that worked.

    Another question, how do I remove the text (and just leave image) when someone hovers? I tried some of the most common codes, but that hides the hover picture too.

    can you post a live link where the problem can be seen?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to make each category have its own a:hover?’ is closed to new replies.