CSS Rollover Effect

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 3449 Views - Last Post: 20 March 2012 - 05:02 PM

#1 hugoriffic   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

CSS Rollover Effect

Posted 20 March 2012 - 11:51 AM

I'm trying to add an image behind some text on my navigation menu items. So far nothing is working. What I have now is this:

HTML Code:
<div id="navigation"><!--This is my navigation-->
        	<ul>
            	<li><a href="home.html">Home</a></li>
                <li><a href="healthynutrition.html">Healthy Nutrition</a></li>
                <li><a href="healthybeauty.html">Healthy Beauty</a></li>
                <li><a href="healthyhome.html">Healthy Home</a></li>
                <li><a href="company.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="tables.html">Tables</a></li>
            </ul>
        </div><!--This is my closing navigation-->



And this is my CSS for the hover event. Which needs to be changed to a rollover. I've googled rollover events and it makes no sense to me what-so-ever.
#navigation ul li a:hover {
	background-image: url(images/ShakleeLeafGreen.jpg);
	background-color:transparent;
	background-repeat: no-repeat;
}



What am I missing here? Other than the hover event needs to be changed to a rollover event.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Rollover Effect

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: CSS Rollover Effect

Posted 20 March 2012 - 11:57 AM

I would guess that background-color overwrites background-image (well, either you have an image or a color…)
Was This Post Helpful? 0
  • +
  • -

#3 hugoriffic   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:02 PM

Thanks for that obvious tip Dormilich. I can't believe I didn't see that. I got rid of the background-color and left the image, yet now nothing happens on my hover event. It's as if there is no CSS code to change the navigation item when you mouse over it.
Was This Post Helpful? 0
  • +
  • -

#4 MrWobbles   User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:06 PM

The a tag is inline, try setting it to block, or inline-block... I think that may be your problem.

Same with any parent tags (li) because you don't want a block element in an inline element. Or maybe put the hover on the li, set it to inline block and then poof, pudding.

This post has been edited by MrWobbles: 20 March 2012 - 12:08 PM

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:10 PM

<li> is already a block element …

maybe a link to a demo page would be a good idea.
Was This Post Helpful? 0
  • +
  • -

#6 MrWobbles   User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:12 PM

Right, but I often change li to inline-block, especially for navigation, so instead of setting a to block or even inline-block leave it as inline, and put the :hover on the li

#navigation ul li:hover {

This post has been edited by MrWobbles: 20 March 2012 - 12:13 PM

Was This Post Helpful? 0
  • +
  • -

#7 hugoriffic   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:20 PM

MrWobbles,
Setting it to either block or inline-block takes away my top horizontal navigation and makes my navigation vertical and centered within the page. I need to have it horizontal.

Dormilich,
I can send a zip file of what I've done but for some reason when I upload the entire page Dreamweaver does not update my website. The link is incorrect I think.
Was This Post Helpful? 0
  • +
  • -

#8 MrWobbles   User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:33 PM

Here is what I have (super simplified):

        <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Something</a></li>
            <li><a>Something Else</a></li>
            <li><a>Contact</a></li>
        </ul>



li{
    display: inline-block;
}

li:hover{
    background: transparent url('test.gif') no-repeat top left;
}

Was This Post Helpful? 0
  • +
  • -

#9 hugoriffic   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:42 PM

OK, so I got my Dreamweaver to upload the entire site. It may be password protected but here is the link to my page: http://itweb.fvtc.ed...1/CSS/home.html
The only page that is a complete mess is Healthy Beauty. I cannot seem to get the main content to sit below the navigation menu.
I hope this help with understanding what I am trying to do. If the link works.
Was This Post Helpful? 0
  • +
  • -

#10 MrWobbles   User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:45 PM

This should get you started:

#wrapper #navigation ul li {
	display: inline-block;
	font-size: 1em;
}

#navigation ul li {
	border: thin solid #39C;
	text-decoration: none;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #419A40;
	color: #FFFFFF;
	margin-bottom: 2px;
	/*display: block;*/
}

#navigation ul li:hover {
	background-image: url('../images/ShakleeLeafGreen.jpg');
	background-repeat: no-repeat;
}


Your path from css to your image is relative, so start by jumping up a folder, and then going into the images folder.

Also, I moved the :hover to the li tag (you will have to add styles for the 'a' tag) and it works - the image position is wrong, but you should be able to figure that out.

This post has been edited by MrWobbles: 20 March 2012 - 12:48 PM

Was This Post Helpful? 0
  • +
  • -

#11 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: CSS Rollover Effect

Posted 20 March 2012 - 12:50 PM

View PostMrWobbles, on 20 March 2012 - 08:45 PM, said:

Your path from css to your image is relative, so start by jumping up a folder, and then going into the images folder.

yepp, I can confirm that the image location given is incorrect.
Was This Post Helpful? 0
  • +
  • -

#12 hugoriffic   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: CSS Rollover Effect

Posted 20 March 2012 - 01:36 PM

I made all the changes to my CSS that MrWobbles recommended. Yet, when I hover over a navigation item all I see is white with a border around it. Is this where positioning the image comes into place??
If so, I've never done that (this is an intro to CSS course). Could someone point me to an article or tutorial on how to accomplish this?
Was This Post Helpful? 0
  • +
  • -

#13 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: CSS Rollover Effect

Posted 20 March 2012 - 01:42 PM

I don’t even see the white … but from the given link you don’t see the image because the image is applied to the <li>, while the <a> (which is on top of that) still holds a green background.
Was This Post Helpful? 0
  • +
  • -

#14 hugoriffic   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: CSS Rollover Effect

Posted 20 March 2012 - 01:52 PM

How would I go about fixing that? I can't get rid of the <a> background color. Do I add a background color to the li:hover of transparent? Or white?
Was This Post Helpful? 0
  • +
  • -

#15 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: CSS Rollover Effect

Posted 20 March 2012 - 02:00 PM

if the <a> must have the green background, the only option is to apply :hover to a and not to li
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2