[Pro] Custom background hover images in CSS menu

Freeway
1

I need individual “hover” background images for each item in the CSS Menu action.

Its easy to add individual background images this by adding a class to each link in the menu. (li styler)

  .myclass { background-image:url("../Resources/myimage.png"); background-repeat:no-repeat; background-position:top center }

Where i’m struggling to create an a:hover background image for the hover state. I think Freeway’s inline styles are messing up so this style does not work…

  .myclass a:hover { background-image:url("../Resources/myhoverimage.png"); background-repeat:no-repeat; background-position:top center }

Anyone advise how to lever Freeway to do this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Bump!

–

David

On 25 Nov 2011, at 15:35, David Owen wrote:

I need individual “hover” background images for each item in the CSS Menu action.

Its easy to add individual background images this by adding a class to each link in the menu. (li styler)

 .myclass { background-image:url("../Resources/myimage.png"); background-repeat:no-repeat; background-position:top center }

Where i’m struggling to create an a:hover background image for the hover state. I think Freeway’s inline styles are messing up so this style does not work…

 .myclass a:hover { background-image:url("../Resources/myhoverimage.png"); background-repeat:no-repeat; background-position:top center }

Anyone advise how to lever Freeway to do this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

This seems to work…

 .myclass.fwNavItem:hover  {background: url(Resources/myhoverimge.png) no-repeat; background-position:top center;}

Unless anyone thinks there is a cleaner method?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I was just going to show you my example

.phoneovertest { 
opacity:0.5;
background:transparent url(http://www.deltadesign.co/images/pic_user_col.png) no-repeat scroll 2% 50%;
padding:4px 0px 4px 20px;
background-position:left center
}
.phoneovertest:hover {
opacity:1;
background:transparent url(http://www.deltadesign.co/images/pic_phone.png) no-repeat scroll 2% 50%;
padding:4px 0px 4px 20px;
background-position:left center
}

Which works for me

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thanks Dave,

.myclass:hover works also

–

David

On 25 Nov 2011, at 18:32, DeltaDave wrote:

I was just going to show you my example

.phoneovertest { 
opacity:0.5;
background:transparent url(http://www.deltadesign.co/images/pic_user_col.png) no-repeat scroll 2% 50%;
padding:4px 0px 4px 20px;
background-position:left center
}
.phoneovertest:hover {
opacity:1;
background:transparent url(http://www.deltadesign.co/images/pic_phone.png) no-repeat scroll 2% 50%;
padding:4px 0px 4px 20px;
background-position:left center
}

Which works for me

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options