CSS - Link Hover Affecting Image, Class Not Working

I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible.

I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible

I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav.

I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover.

I thought I could then do this as a single li but I have not had success.

What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible.

Hi everyone,

I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not.

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located.

To get a visual you can check the website (just remove the *)
*onholdmusicsource*.com

In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

Comments would be fine
Ideas would be great
Solutions would be fantastic

Many Thanks-

Am trying to solve an annoying IE problem:

I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas?

The code is:

Code:

#item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }

I have used several image classes in my css to control the thickness of the border like so ..
img.left { border: #FF66CC solid 0.02em;
border-left: #FF66CC solid 0em;
border-top: #FF66CC solid 0em;
}
img.right { border: #FF66CC solid 0.01em;
border-right: #FF66CC solid 0em;
border-bottom: #FF66CC solid 0em;
}

But for some reason this doesn't sho up in Safari or IE5.2 (on the mac) and also I checked it on Opera 5, and it doesnt show the borders on the image?

any ideas?

thanks for your time.

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,

Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something?

For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element.

Hey guys,
I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!)

Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this:

......1 2 3 //top row (multiples)

1.....1 2 3
2.....2 4 6
3.....3 6 9

Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes.

I can only get one rollover working, with simple 'hover' commands.

I've search for an answer for hours, to no avail.

any suggestions?

And here's a more "code specific" example of the table:

<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>2</td><td>2</td><td>4</td><td>6</td>
</tr>
<tr>
<td>3</td><td>3</td><td>6</td><td>9</td>
</tr>
</table>

Thanks so much guys!

Forgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet:
Code:

<style>
	a:hover span { color: Green }
</style>

<a href="#"><span>link</span></a>

One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all:
Code:

<style>
	a:hover { visibility: inherit }
	a:hover span { color: Green }
</style>

<a href="#"><span>link</span></a>

But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important.

I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags.

Confirm/deny/comment?

Hey guys.

I'm still learning css so excuse some crude styles.

I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it.

It doesn't do that in firefox or opera so I don't know whats' going on.

Heres my CSS:

Code:

body {
  text-align: center;
  height: 100%;
  background-image: url(images/bg_title.gif);
}

img {
  border: none;
}

#wrapper {
  width: 780px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: relative;
  background-color: #FFFF7D;
  color: #000000;
  border: solid 2px #0000ff;
}

#header {
  width: 780px;
  height: 143px;
  margin-bottom: 3px;
}
#headerImage {
  width:200px;
  float: left;
  margin-right: 2px;
}
#headerImage img {
  margin: 0px;
}

#headerLogo {
  width: 577px;
  float: left;
  margin: 0px;
}

#headerLogo img {
  margin: 0px;
}

#navagation {
  width: 204px;
  margin-bottom: 1px;
  float: left;
  margin-right: 1px;
}

.navIcon {
  float: left;
  margin-right: 2px;
  margin-bottom: 1px;
  padding: 0px;
}
.navButton {
  float: left;
  margin-bottom:1px;
  padding: 0px;
}

a.navButton:link {
  border: none;
}
a.navButton:visited {
  border: none;
}
a.navButton:hover {
  border: 1px solid #000000;
}

#mainContentArea {
  float: left;
  width: 570px;
  height: 711px;
  border: solid 1px #000000;
  background-color: #ffffff;
  margin-bottom: 3px;
}

#footer {
  height: 1px;
  margin-top: -1px;
  clear: both;
  overflow: hidden;
}

Thanks in advance!

-Tim

Hello,

The hover link looks good on IE7 and FF but not on IE6
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
	position:absolute;
	float:left;
	font-size:11px;
	color:#FFFFFF;
	font-weight:bold; 		
	left:190px;
	top:130px;
	width:145px	
}
#header_navigation ul {
border:1px solid #FF0000;
	float:left;
	list-style-type:none;
	margin:0 30px 0 0;
}
#header_navigation li {
	width:145px
}
#header_navigation li:hover {
	background-color:#FFFFFF;
}
#header_navigation a {
	text-decoration:none;
	color:#ffffff;
	background-color:none;
}
#header_navigation a:hover {
	color:#000000;
	background-color:#FFFFFF;
	width:145px
}
</style>
</head>

<body>
<div id="header_navigation"><!--begin of header_navigation-->
				<ul>
					<li><a href="index.asp">Home</a></li>
					<li><a href="#">News</a></li>
					<li><a href="#">Forum</a></li>				
					<li><a href="blog.asp">Blogs</a></li>			
					<li><a href="shoutbox.asp">Shoutbox</a></li>
					<li><a href="#">Testimonials</a></li>
					<li><a href="#">Photo Gallery</a></li>
					<li><a href="#">About Us</a></li>
				</ul>												
			</div>	
</body>
</html>

Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code:

Code:

#print_category {
     position: absolute;
     left: 35%;
     top: 30%;
     font-size: 13px;
     text-align: left;
     line-height: 2 ;
     margin-right: 5em;
		}

Properties I want to apply:

A:link {color: #000099;
text-decoration: underline;
}

A:visited {color: #000099;
text-decoration: none;
}

A:hover {color: #000099;
text-decoration: none;
}

A:active {color: #000099;
text-decoration: none;
}

How can this be done, Ive tried but to no avail:

- A#print_category:active {color: #000099;
text-decoration: none;
}

Thanks!

I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is:

Quote:
.leftblock a{display: block;
border-top: 1px solid #ffffff;
font-weight: bold;
color: #21536A;
text-decoration:none;
background-color:#CCCCFF;
}



Quote:
.leftblock a:hover{border-top: 1px solid #cccccc;
background-color: #DDEEFF;
font-weight: bold;
text-decoration: none;
}



I added display:block to the a:hover class as well to try that to no avail.

http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks.

Thanks for taking the time to read my question.

I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why?

Here is my css.

@charset "iso-8859-1";
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff
}
.textCopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
hover: #ffffff
}
.textbigger {

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
hover: #ffffff
}
a:hover {
color: #ffffff;
}
a:link {
color: #999999;
}

a:visited {
color: #747474;
}

a:active {
color: #CCCCCC;
}

body {
margin-top: 0;
background-color: #000000;

}

You can see this at work at www.pierced.ca

Brad

My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background.

Heres the CSS:

Code:

	.link_hover1{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:visited{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:hover{
	background-image: url("images/link_img_01b.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:active{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	}

I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem.

I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html

However, I wish to have MY OWN font style on each links as it can be seen on:

The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php

i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.

Code:

				
<li><a title="link six" href="index.html">link six</a></li>
<li><a title="link five" href="index.html">link five</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link one" href="index.html">link one</a></li>

My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ???

I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.

My CSS code so far is:

Code:

/* CSS Document */

body 
{
	background-color:black;
	background-attachment:fixed;
}

/* .................................... HEADER & FOOTER ................................... */

#header
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	width:100%; 
}

#header  a
{
	color:yellow;	
	text-decoration:none;
}

#header  a:hover
{
	text-decoration:underline;
}

#footer
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	border-top:3px solid fuchsia;
	float:left;
	background-color:black;
	width:100%; 
}

#footer a
{
	color:yellow;	
	text-decoration:none;
}

#footer a:hover
{
	text-decoration:underline;
}

/* ........................................ BANNER ........................................ */

#banner
{
	width:100%;
	border:none;
	text-align:center;
	background-color:none;
}

/* ......................................... TOP MENU .................................... */

#topMenu
{
	width:100%;
	float:right;
	border:none;
}

#topMenu ul
{
	float:left;
	margin-left:4%;
}

#topMenu ul li 
{
	display:inline;
	width:20%;
}


/* ................................... CONTENT ................................................ */

#leftContent
{
	float:left;
	width:10%;
	border:1px solid red;
	background-color:green;
}

#centerContent
{
	background-color:white;
	width:75%; 
	margin-left:1%;
	float:left;
	border:1px solid green;
}

#centerContent ul
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	list-style-type:decimal;
	color:black;
}

#centerContent li
{
	margin:3% 3%;
	line-height:1.5em;
}

#rightContent
{
	float:right;
	background-color:fuchsia;
	border:1px solid red;
	width:10%;
}

/* ................................... STYLES ......................................... */

p.first-letter:first-letter
{
	color:red;
	margin-left:5%;
	font-size:xx-large;
}

p
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	line-height:1.5em;
	margin:2% 3%;
	color:black;
}

h4
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	font-size:x-large;
	color:green;
}

h5
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	margin:2% 3%;
	color:blue;
}

h6
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	margin:0;
	font-size:medium;
	font-weight:normal;
	color:red;
}

.italic
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-style:italic;
}

.bold
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-weight:bold;
}

.colorTextRed
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:red;
}

.colorTextBlue
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:blue;
}

.colorTextGreen
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:green;
}

/* ................................... TABLE ......................................... */

#contactTable
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
}

#contactTable tr
{
	border:none;
}

#contactTable th
{
	color:fuchsia;
}

#contactTable td
{
	font-size:medium;
	color:black;
}

/* ................................... CLASSES ......................................... */

.table
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	border-collapse:collapse;
	text-align:left;
}

.tr
{
	border:none;
}

.td
{
	border:thin solid red;
	font-size:medium;
	padding:2px;
	text-align:center;
	color:black;
}