CSS - Hover Link

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;
}

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.

Hello
I would like to make a hover effect when my mouse is over a link, as shown in my attachment.
What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed).
Anyone can help me with this?

Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries.

Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it?

I tried setting it as a background image, but it only fills the background of the text.

Thanks!

This is the new site I'm working on:
http://animalemergencybloomington.com/Index2.html

Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.)

Right now I have this in the <head>

css Code:
Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style>

  

 <style type="text/css">


 body {


 color: #000000;


 font-size: 12pt;


 font-family: Verdana;


 margin: 0px 0px;


 }


 A:link { text-decoration: none }


 A:visited { text-decoration: none }


 </style> 

and this for the <body>:

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF">

adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover.

I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo.

I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover.

Help?
Thanks,
Ez

I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a div and the css for the block is simply:

.postbitleft { background-color: #0B198C; }

(aside from the size attributions which are already defined. What do i need to add to that CSS for it to change colour when someone hovers over it? Can i actually use CSS for that or will i have to use javascript?

Regards,

James

Hi there,

I have a script that displays content when a link is hovered on which then hides when the mouse is hovered off it. Is there a way to make it so the content stays there until one of the other links is hovered on?

This is my CSS:

PHP Code:
 div#links a span {display: none;}


div#links a:hover span {display: block;
   position: absolute; top: 200px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}


div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;
   } 





and this is the HTMl
PHP Code:
<div id="links">
<a href="http://www.meyerweb.com/eric/css/">Link 1<span>1</span></a>
<a href="http://www.meyerweb.com/eric/css/">Link 2<span>2</span></a>
<a href="http://www.meyerweb.com/eric/css/">Link 3<span>3</span></a>
</div> 





Any ideas?

I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this?

Whew, it's been a while sin'ce i've been here. Thanks in advance!

~Brendan

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

Hi. Pleeease help!

I've created a CSS for a CMS but I'm having a problem with text color.

I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time.

I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work.

Can anyone help?

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.

Thanks for taking the time to read my question.

It's been a while since I last tried making a page.

I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have
link, visited, and active all the same color. Only hover is different, and none of them are purple.

I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working.

HTML
Code:

<a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a>

CSS
Code:

a.NavButtons:link {
border-color: green;
border-width: 2px;	  
border-style: solid;
}     /* unvisited link */

a.NavButtons:visited {
border-color: green;
border-width: 2px;	  
border-style: solid;
}  /* visited link */

a.NavButtons:hover {
border-color: Red;
border-width: 2px;	  
border-style: solid;
}   /* mouse over link */

a.NavButtons:active {
border-color: green;
border-width: 2px;	  
border-style: solid;
}   /* selected link */

Hi,
I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ?

Here is the code I have now.
<a href="javascript:undefined" id="imageLinkId">GMNA</a>&nbsp;

<script language="javascript">
if( ... ) {
document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); }
else {
document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); }
</script>

Thanks