751 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
CyberShot says

I am trying to figure out how to get the background of the hovered anchor tag to turn the span.number background red. Right now when I hover, it turns them all red. I only want the one that is hovered on red. So if you hover on a category, it will turn the category color red as well as the background of the number to the right red.

http://jsfiddle.net/fPj52/3/
39 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
synesthete says

Hi, if You want change only background color use css only:

ul li:hover span.number {
background-color:red;
}

or

ul:hover span.number {
background-color:red;
}
751 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
CyberShot says

yes, that will work but it will not work if you hover over the span.category. That is why I am trying to use jquery

325 posts
  • Sells items exclusively on Envato Market
  • Has been a beta tester for an Envato feature
  • Has sold $10,000+ on Envato Market
  • Has referred 10+ members
+2 more
squaredWeb says

Here you go: http://jsfiddle.net/fPj52/10/

I moved the “category” class from the span to the li and since i have no clue if the span is used for something more later i just left it in.

4596 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 more
Enabled Moderator says

Here you go: http://jsfiddle.net/fPj52/10/ I moved the “category” class from the span to the li and since i have no clue if the span is used for something more later i just left it in.

+1. Would’ve done the same!

no-thumbnail
caliperconstruction Recent Posts Threads Started
1 post
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
caliperconstruction says

Thank you. Very interesting. Just out of curiosity, why bother moving the category class form the span to the li? is there really a difference?

751 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
CyberShot says

Oops, that last post is from me. Forgot I was logged into another account

325 posts
  • Sells items exclusively on Envato Market
  • Has been a beta tester for an Envato feature
  • Has sold $10,000+ on Envato Market
  • Has referred 10+ members
+2 more
squaredWeb says

Basically its just the shortest and most efficient way, at least to my knowledge, to achieve this effect. If you use ”$(this)” on the span with the “category” class you would have to go the extra mile with something like this: http://jsfiddle.net/fPj52/25/

Plus if you move the class to the li element you can remove the span and save some html markup.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by