CSS - On Hover Effects For Images?

Hi, currently the css is set up to display a grey box behind whatever is rolled over...i would like to make it so that doesn't apply to images, kinda looks wonky.

Here's the site, you'll see what i'm talking about, and the css code follows;

Code:

.borders {
	border: 1px solid #666666;
}

.footer {
	border: 1px solid #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #333333;
}

.prodborders {
	border: 1px dotted #999999;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

.headtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333333;
	font-weight: bold;
}

table.menu {
	border:1px solid #666666;
	background:#FFFFFF;

}

table.menu a, table.menu a:link, table.menu a:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:12px;
	color:#333333;
	text-decoration:none;
}

table.menu a:active, table.menu a:hover {
	color:#333333;
	background:#CCCCCC;
}

.noborder {
	border:0px; 
	margin-top:0px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 92px;
	border-bottom: 1px solid #666666;
	backgound-image: url(images/no-pic.gif);
	}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 91px;
	top: 0;
	display: none;
	}
	
ul li a {
	display: block;
	text-decoration: none;
	color: #CCCCCC;
	background: #FFFFCC;
	padding: 5px;
	border: 1px solid #666666;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { 
	display: block;
	}

Thanks!

Hi,

I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab).

It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu.

I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work.

My CSS is:

/* this is the bar where the menu is located */
.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

/*holder for the menu */
div.navigation {
margin-left:30px;
padding-top:10px;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
display: block;
padding: 0px 20px 0px 10px;
display: inline;
height:2.19em;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
}

.navigation ul li a:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
}

I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync.

I tried this altrnative code, to no avail:

.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

div.navigation {
margin-left:30px;
padding-top:10px;
height:2.19em;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
padding: 0px 20px 0px 10px;
display: block;
float:left;
height:2.19em;
}

.navigation ul li:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
background-repeat:no-repeat;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
display: inline;
}

Any ideas or pointers gratefully received!

A few people seem to have had the problem of the a:hover not working right in ie when applied to images. Mine is just applied to a standard bit of text.

In my menu (CSS only, no javascript) the descriptions are "display:none" in the initial "a" state and then "display:block" in the a:hover state. Works in Firefox, but not ie.

Any ideas? My page is at www.prioritypie.f2s.com/KSA/about.htm

You can see the CSS by clicking on the first link on the left hand side of the page.

Thanks to anyone who can take away the pain and swearing of the last couple of hours.

why won't this work on internet explorer a:hover img { }.

This is exactly what i'm using, it works on firefox but doesn't work on IE. You can see it in action here.
Code:

a:hover img { border: 2px solid #fff; }

Hi all,
Erm, when you load a site, and then mouseover something, (css hover) the image, depending on the size, will not load straightaway, but perhaps after a .5 second flash, which makes it look a bit ugly. Does anyone know how to make the page load all the images, without having to mouseover first?
Thanks!
Robin

So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc.

My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most.

My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image.

Maybe that's the case? I'm not an expert on CSS.

I can't seem to include a link due to some "akismetspam" phrase not being found?

I have a list of about 50 items, numbered 1 - 50.

It looks boring just listed on the page and I want to jazz it up. I was wondering, if anyone had any ideas?

I was thinking of having each numbered item listed in a random font size or something but I'm not sure if it's possible to do using CSS?

here is the deal. i have a css layout with a top which holds the banner, a content which holds content and a footer which holds the footer. the page is all black except the footer is a dark grey. is there anyway I can make the email link a different link color than the rest of the links on the page?

How does wordpress manage the fading effects?, It goes from a color to another in the RGB space. I was wondering if this was CSS related, but didn't find much in the css files.

Anyone care to explain me how to achieve this, please.

Thanks.

http://turkeybot.info/flash/play.php?id=121

When you hover near the bottom where it says "hover me", it's supposed to display a div right below that that has a black background and rounded borders (for firefox)...but the thing is, it isn't! What could be causing this? (css is on http://turkeybot.info/css/normal.php)

Hey,

I have a problem with IE and my CSS.

I have a table with a background-image and I wan that to change to a certain color on rollover.

div.special {background-image: url(../images/pinkfade_bg.gif);}
div.special:hover {
background:#F8F8F8;
}
div.normal {
background:#FFFFFF;
}
div.normal:hover {
background:#F8F8F8;
}

Now this works fine in Mozilla, Safari etc. Just not IE

Any ideas?

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

Hi - i have forgotten how to assign different link "effects" to different links, so if someone could remind me i would be extreeeeemely greatfull !!!

Cheers

Jackson

Hi guys,
Was wondering if you could tell me where I'm going wrong with this. Basically I have used the class "WhiteBoldLinks" on some text BUT when the mouse goes over the link I cant get the underline and text colour to work which is assigned to the class "#WhiteBoldLinks a:hover" .

How do I use this? Or have I coded it wrong?

PHP Code:
.WhiteBoldLinks {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}
#WhiteBoldLinks a:hover {
    text-decoration: underline;
    color: #FF0000;
} 

Hi there,

I would like for the background of a text link to change colour when the mouse hovers over the text... no problem

a:hover {background:#72b83c}

However I would like to STOP the background of an image doing the same thing.... this I am having trouble with. I've tried

a:hover img {background:none}
a:hover img {background:none!important}

But it doesn't seem to work (the background still changes behind the image (showing the colour around the left and bottom of the image).

Can anyone offer any suggestions?

Paul