different hover over for each page item

my goal is:
when you hover over an page item.. it will show an image related to that page item.

for example:"
hover over the menu button "apple" and you'll see an image of an apple..
and when you hover over the page "pear" it will show a pear.

(just an example)

i'm using Atahualpa 3.6.7

hopefully someone can help me with this...

#2

Sep 22, 2011, 01:27 PM

lmilesw

10,172 posts · Jul 2009

Central New York State USA

Use the WordPress menu system and add a different class to each menu item (You may have to enable classes in the Screen Options for Menus). Then use that class to apply the necessary CSS for a background image.

__________________~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

#3

Sep 22, 2011, 11:44 PM

fullmetalgirl

32 posts · Aug 2010

Ok, i got the menu screen set...

but what do i fill in at css class?
and how do i add the class to the css.php .

(i read somewhere that css class in the wordpress menu systeem only applys to tekst... is this correct?)

Sorry for all these questions, could it be possible to get an example?

Greetings,

#4

Sep 23, 2011, 04:17 AM

juggledad

23,420 posts · Mar 2009

OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome

you can add CSS Selectors and CSS Rules to ATO->Add HTML/CSS Inserts->CSS Inserts

on the wordpress menu screen select the 'Screen Options' tab up the top and click the 'CSS Classes' check box