CSS - A:hover Question

Having trouble with using CSS for email link. The problem is that mouse hover produces a black background - this is the intention. However, after clicking on link to open email client, the link (on that page) doesn't have the balck background effect. Other pages in the site are OK - until I click them once.

Am I missing a section from the css file below that would give me the same hover effect even after the action of clicking the mailto: link has been done?

Many thanks

a:link.link1 {
color: #CDBC75;
text-decoration: none;
background-color: transparent
}
a:visited.link1 {
color: #CDBC75;
text-decoration: none;
background-color: transparent
}
a:hover.link1 {
color: #CDBC75;
text-decoration: none;
background-color: #000000
}
a:active.link1 {
color: #CDBC75;
text-decoration: none;
background-color: transparent

I'm taking a condensed class at the community college here and my final is due tomorrow night. My teacher has a very thick Russian accent and is very difficult to understand, and does not make himself particularly available away from class hours...so...I'm sort of stuck. I understand that this is an embarrassingly basic CSS I've got rigged up here, so I need no critiquing on it, though if you feel you must, go ahead. Anyway, I was finishing the thing up tonight and realized that I missed one of the requirements for this final project (sloppy handwriting =( ). My main question is this: On each page I have a series of thumbnails, and one larger image at left. I would like to (either with addition to the CSS, or with not too much extra addition to each of the thirty some pages) create a hover effect wherein ONLY the larger image at left will load a larger version of the image on mouseover. I found a few examples on CSS tutorial websites but have been unable to correctly apply it. I am really in a jam and would appreciate any help anyone could give me on this. Additionally, (I know this one is really pushing it) I was not able to resize images, as I am on a new machine and a tight budget, so couldn't afford a copy of photoshop. Most of the images are already resized to 600 x 800 (downloaded from my photobucket account onto the new machine after the old died) but a few of them are larger sizes...so on the mouseover, is there a way to constrain all images to their correct proportions, regardless of filesize? I think this might be an impossibility but I thought it was worth the time to ask anyway (e.g. 600 x 800 images that are constrained to a smaller size, will pop over on mouseover to full 600 x 800, while images that may exceed those dimensions would still on mouseover pop over at a maximum of 600 or 800, whichever side is the largest, and the smaller size whatever it should be proportionally)?

I know this is really convoluted and probably sounds incredibly dumb, but most of us in the class have essentially self-taught ourselves, given how difficult our instructor is to follow in the classroom, so I've done everything on this project by trying to find examples in a pretty terrible text book.

Any help would be hugely appreciated.

I am pasting in the CSS sheet, as well as the code for an example page, so that someone might possibly be able to help me correct/add this.

If you are able to help, please be as explicit and obvious as possible, because I am having a hard time working this out on my own.

CSS:

html, body {
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}


#container {
width:800px;
margin-left:auto;
margin-right:auto;
}


#header {
width:800px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}


#header h1 {
margin:0;
font-size:18px;
}


#breadcrumb {
list-style-type: none;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
}


#breadcrumb li{
float:left;
color:black;
padding-right:3px;
}


#breadcrumb li a{
text-decoration:none;
font-style:italic;
color:black;
}



#nav {
list-style-type: none;
margin:0;
padding:0;
}


#nav li{
float:left;
text-align:center;
width:25px;
}


#nav li#pages{
width:700px;
font-size:14px;
}


#nav li a img{
border:0;
}


#content {
width:800px;
}


#large-image-frame {
width:400px;
float:left;
}


#large-image-box {
margin-top:5px;
padding-top:10px;
width:320px;
margin-right:auto;
margin-left:auto;
background-color:black;
padding-bottom:10px;
}


#large-image-box img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}


#large-image-box span{
font-size: 12pt; display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
height:60px;
width:300px;
background-color:white;
}


#thumbnail-box {
width:400px;
float:left;
}


#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}


#thumbnails li {
margin:0;
padding:0;
float:left;
}


div.small-image-box {
background-color:black;
width:110px;
margin-bottom:10px;
margin-left:15px;
text-align:center;
padding-bottom:5px;
padding-top:5px;
}

div.small-image-box img {
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
}


div.small-image-box span {
height:10px;
width:100px;
background-color:white;
display:block;
font-size:9px;
margin-left:auto;
margin-right:auto;
text-align:center;
}


#instructions {
width:800px;
}

a:link, a:visited, a:active { text-decoration: none }

a:hover { color: black;
background-color: white;
text-decoration: none;
border: 2px solid black; }








and the section of code which I would like the mouseover to be effective on:



<div id="content">

<div id="large-image-frame">

<div id="large-image-box">

<img src="images/OP06.jpg" width="94%" height="94%" alt="OP06" />

The section in red is where the image is that I would like to be able to mouseover for a larger (approximately 600 x 800 or 600 x _______/ or _____________ x 800, depending on proportions). Again, I'm desperate, and would be super super grateful for any help/pity any of you might toss my way. Thanks.

Hey there! I have a question: is it possible to change the properties of OTHER elements, IDs, et cetera when hovering over something else? For example, let's say I have a fieldset, and inside are some fields, and a <legend>. Is it possible to make the legend change color when I move my mouse over the fieldset, and not the legend?

This could make for some nice CSS effects.

Thanks!

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!

I don't know is it done before or not but i made it ,, i got rid of the onmouseover:crab tags but i think if you announce it as harmless I have use it again because I'll to write three times more code to get what i want with that hover thing.
both functional in ie and ff
css
Code:

.ortadiv:link {background-color:#EFEFEF;}
* html .ortadiv {background-color:#EFEFEF;} /*hack*/
.ortadiv:hover {background-color:white; cursor:default}

html -(my code looks like that)
Code:

<a class="ortadiv" href="#"><span><h5></h5></span></a>

(it doesn't validates !)
my main concern is about my headers , because when i use my css-hack-hover they becomes links with "#" . Is it affects search-engine things ?

edit: I decided to not to use it because of my validating concerns