Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 18/11/2017 Black Friday is coming

    Don't wait BLACK FRIDAY, use FRIDAY17 coupon code to get 35% discount for all our extensions right now.

  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Background image on hover
(1 viewing) (1) Guest
Go to bottomPage: 12
TOPIC: Background image on hover
#6660
Background image on hover 7 Years, 3 Months ago Karma: 1
Hello

I can't figure out why I can't get a background image to show upon hover.

Here's my test page (work in progress).

rowbytesting.com/

Any thoughts?

Below is the css I put in the module. In my attempts to fix the css I think I have added far too much code!


Code:

#ariyui53.yui-skin-sam .yuimenubar {
background:url("js/assets/menu/sam/sprite.png") repeat-x scroll 0 0 transparent;
border:1px solid #808080;
font-size:93%;
line-height:1.6;
margin-left:300px;
}
#ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel, #ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel:link, #ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel:visited, #ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel:hover {
border-color:#808080;
border-style:solid;
border-width:1px 0;
color:#000000;
background-image:url("js/assets/menu/sam/hover-01a.png") 
background-repeat:repeat-y;
cursor:default;
font-size:93%;
line-height:2;
margin:-1px 0;
padding:0 20px 0 10px;
text-decoration:none;
}

#ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel, #ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel:link, #ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel:visited, #ariyui53.yui-skin-sam ul li a.yuimenubaritemlabel:hover {
border-color:#808080;
border-style:solid;
border-width:1px 0;
color:#000000;
cursor:default;
font-size:93%;
line-height:2;
margin:-1px 0;
padding:0 20px 0 10px;
text-decoration:none;
background-image:url("js/assets/menu/sam/hover-01a.png") 
}

Last Edit: 2010/08/28 21:06 By rowby.
The administrator has disabled public write access.
 
#6663
Re:Background image on hover 7 Years, 3 Months ago Karma: 670
Hello,

Use the following CSS rule:

Code:


#ariyui53.yui-skin-sam .yuimenubar ul li.yuimenubaritem A:hover,
#ariyui53.yui-skin-sam .yuimenubar ul li.yuimenubaritem A.yuimenubaritemlabel-selected
{
  background-image: url("/modules/mod_ariyuimenu/mod_ariyuimenu/js/assets/menu/sam/hover-01a.png");
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
#6671
Re:Background image on hover 7 Years, 3 Months ago Karma: 1
Thanks! That worked great for the hover.

Is there a way so that the non-hover state was just transparent, without any background color so just the existing background graphic shows through. Just the text and the border lines over the below graphic:

rowbytesting.com/images/24-hour-top-nav-03.png
The administrator has disabled public write access.
 
#6672
Re:Background image on hover 7 Years, 3 Months ago Karma: 670
Use the next CSS rule:

Code:


#ariyui53.yui-skin-sam .yuimenubar ul li.yuimenubaritem A.yuimenubaritemlabel
{
  background: transparent none;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
#6713
Re:Background image on hover 7 Years, 3 Months ago Karma: 1
Hi

Thanks for helping. Below is the css I am now using in your module. It shows the background image for hove, which is what I want. But it won't show the transparent image for non hover.

rowbytesting.com/

Code:

#ariyui53.yui-skin-sam .yuimenubar ul li.yuimenubaritem A.yuimenubaritemlabel
{
  background: transparent none;
}

#ariyui53.yui-skin-sam .yuimenubar ul li.yuimenubaritem A:hover,
#ariyui53.yui-skin-sam .yuimenubar ul li.yuimenubaritem A.yuimenubaritemlabel-selected
{
  background-image: url("/modules/mod_ariyuimenu/mod_ariyuimenu/js/assets/menu/sam/hover-01a.png");
}

The administrator has disabled public write access.
 
#6715
Re:Background image on hover 7 Years, 3 Months ago Karma: 670
Hello,

Add the following CSS rule:

Code:


body #ariyui53.yui-skin-sam .yuimenubar
{
 background: transparent none;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
Go to topPage: 12