0

I have to hover effect for a menu. Please see the image for reference. All menu items are of different size. The hover has shades it it. More black on left, less black on right while center is repeatable. So now my question is can we have a hover with 3 different images together so that I dont need to have separate for hover state for each menu item.

Thanks in advance.

http://tinypic.com/view.php?pic=3010zly&s=5

Agustin Meriles
  • 4,866
  • 3
  • 29
  • 44
Ram
  • 319
  • 1
  • 2
  • 16
  • 1
    Simply answer. Yes. Longest answer for your example You can use 3 tags for example `
    • ` and give them rules in css. – WooCaSh May 17 '13 at 19:39
  • explain more clearly. why do you need 3 images for hover. The ":hover has shades in it" don't make sence. Maybe you are talking about gradients. Maybe the right statement is that "the image has shades in it" which is what gradients are about. – Jawad May 17 '13 at 19:39
  • @WooCaSh: Yes what? Don't even get the question. You can have the same numbers of images X 2 for hover for the numbers of items in a menu – Jawad May 17 '13 at 19:41
  • @Jawad I just answer for this: `So now my question is can we have a hover with 3 different images together so that I dont need to have separate for hover state for each menu item.` – WooCaSh May 17 '13 at 19:43
  • Yes they are called sprites - http://css-tricks.com/css-sprites/. You can have a zillion images in a sprite – Jawad May 17 '13 at 19:45
  • @Jawad Sorry I am not clear, yes the hover has a gradient. Like the gradient is less in right, shade is more on left and its uniform in middle. – Ram May 18 '13 at 02:12
  • @WooCaSh Thanks for your answer. I got you in a span we use left and right images and a single repeatable bg for "a" but how the hover work? If we use it a:hover only changes the hover state where we have "a" defined hover may bot work with left and right spans? So we have hover effect for only middle portion. – Ram May 18 '13 at 02:15
  • @Jawad I saw sprites thanks for the same we use single image so one http request but we need to define all hovered image states in that single image. I am trying to check if we have solution like we have 3 different images left, middle, right where middle is repeatable so we can have any size of menu item and get hover effect using those 3. Is it possible using :before and :after if so how can we use it. Any help would be appreciated. – Ram May 18 '13 at 02:18
  • you cant effect hover for 3 different html elements/tags. Unless you change your html markup structure or use javascipt/jquery. Do a search on "hover on multiple elements" in stackoverflow. I still failed to get what you want. – Jawad May 18 '13 at 11:44
  • http://stackoverflow.com/questions/16628273/3-divs-two-are-changed-by-one-hover-css – Jawad May 18 '13 at 21:57
  • Thanks Jawad you have been help ful. – Ram May 23 '13 at 14:43