CSS - Firefox Css Link Hover Glitch

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.

I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail:

Code:

div.headleft {
    text-align: right;
    width: 100%;
}

div.headleft a:link {
    display: none;
}

div.headleft a:visited {
    display: none;
}

div.headleft a:hover {
    display: block;
    background: inherit;
    color: #ff0000;
}

div.headleft a:active {
    display: none;
}

I have tried a few variations to the above snippet of code and am at my wits end...

My gratitude ahead of time...

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

I have the following code, but the CSS file that I have already defines link and hover to be something else

Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link?

Thanks for the help


Code:

div#hdr_ctr	{ width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}

div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}	
	div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}	
	* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }	
	div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}

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

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.

Hi,

I have the following CSS:

.class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;}

for this javascript/HTML:

menu1[0]='<span class="class2"><a href="">&nbsp;&nbsp;About our trees</a></span><br>'

It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good.

AAUGH.

Happy Thanksgiving to all who are celebrating!
Kimber

Hi All,

I'm pretty confused by this. Work ins IE6 but not in Firefox 1.0.4

I've uploaded the offending page below...
http://www.bertucci.net/nwhc/index2.php

I moved the relavent CSS into the HTML and commented out the linking sheets.

The problem... at seemingly random places the hover properties do not work. On hover, the link should be underlined. Some links will work right, while others do not.

I've done many googles and a Dev Shed search with no answers so far, so I'm making a post here for help.

The page is a mix of DIV and TABLE elements. I just think it's easier for me to work with. A Side question, is this an 'ok' practice or should sites be designed strictly DIV or TABLE only? (All styles for DIVs are right in the DIV I have not broken them out yet until the design is hammered down).

Cheers,
Fozzy

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,
I have a pure css menu that uses hover,
Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz.

Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work.

Problem, cant test this as I dont have any touchscreen.
So 1. is there a way to add a code to disable the hover affect?
2, maybe a website where you can test but using mouse....
3. Dont remember, its validates but are there anything against using <a href="#">?

Thanks,
Helen

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?