PDA

View Full Version : mouse over and css

ciscoguy24
02-05-2006, 05:44 PM
Hey guys my site http://www.digitaleyesandears.com/testing/One/center1.html

How can I have it where when users mouse over the >> on the top it will display Prev to the left of it and of course go away when the mouse isn't on it?

css is http://www.digitaleyesandears.com/testing/One/center1.html

adam
mlse
02-05-2006, 06:02 PM
This works in FF, not tried IE:

HTML:

<a href=""><span class="hideme">back</span> &lt;&lt;</a>


CSS:

A {
margin:60px;
font-family:sans-serif;
font-size:16px;
font-weight:bold;
color:#000;
text-decoration:none;
}

SPAN.hideme {
color:#FFF;
}

A:hover SPAN.hideme {
color:#000;
}


Hope that helps,
Mike.
mlse
02-05-2006, 06:08 PM
Just tried it in IE.

It works in FF, Opera and Moz. But not in IE.

Why am I not surprised ...
ciscoguy24
02-05-2006, 06:11 PM
Just tried it in IE.

It works in FF, Opera and Moz. But not in IE.

Why am I not surprised ...


Do you know how to get it to work in ie?
mlse
02-05-2006, 06:13 PM
Will let you know!

As a work-around, you could use <a href="whatever" title="prev">&lt;&lt;</a>. That will cause a little pop-up to appear displaying the word "prev" whenever the user's mouse hovers over the link.

Mike.
ciscoguy24
02-05-2006, 06:17 PM
Will let you know!

As a work-around, you could use <a href="whatever" title="prev">&lt;&lt;</a>. That will cause a little pop-up to appear displaying the word "prev" whenever the user's mouse hovers over the link.

Mike.


Ok mike just let me know thanks :)
mlse
02-05-2006, 09:36 PM
Fixed it.

What you'll need is an image containing the word "prev", with a background colour the same as the background colour of the element in the page where you want to display the link. (I made one in 2 minutes in paint).

Then you need the following:

HTML:

<a href="mypage.html">&lt;&lt;</a>


CSS:

A { line-height:16px; padding-left:35px; }
A:hover { background:url("prev.png"); background-repeat:no-repeat; }


Yes it really is that simple, no I haven't left anything out :D. In the anchor style I chose a line-height = image height (so that the image doesn't appear higgledy-piggledy with respect to the angle braces) and padding-left sufficient to prevent overlap of the image with the angle braces. This method is cross-browser compliant.

Mike.
ciscoguy24
02-06-2006, 02:46 AM
Fixed it.

What you'll need is an image containing the word "prev", with a background colour the same as the background colour of the element in the page where you want to display the link. (I made one in 2 minutes in paint).

Then you need the following:

HTML:

<a href="mypage.html">&lt;&lt;</a>


CSS:

A { line-height:16px; padding-left:35px; }
A:hover { background:url("prev.png"); background-repeat:no-repeat; }


Yes it really is that simple, no I haven't left anything out :D. In the anchor style I chose a line-height = image height (so that the image doesn't appear higgledy-piggledy with respect to the angle braces) and padding-left sufficient to prevent overlap of the image with the angle braces. This method is cross-browser compliant.

Mike.

cool thanks mike I will try it :)
_Aerospace_Eng_
02-06-2006, 03:37 AM
To get it to work in IE without images you need to have the styles in a certain order.
<!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">.
a.extra {
color:#00F;
text-decoration:none;
background:none;
}
a.extra:hover {
color:#F00;
background:none;
}
a.extra span {
display:none;
}
a.extra:hover span {
display:inline;
}
</style>
</head>

<body>
<a href="#" class="extra"><span>Previous</span> &gt;&gt;</a>
</body>
</html>
The above works in FF1.5+, Opera 7.54+, NS7+, and IE5.5+ (including IE7 Beta 2). I'm not sure about any Mac Browsers.
ciscoguy24
02-06-2006, 11:38 AM
Fixed it.

What you'll need is an image containing the word "prev", with a background colour the same as the background colour of the element in the page where you want to display the link. (I made one in 2 minutes in paint).

Then you need the following:

HTML:

<a href="mypage.html">&lt;&lt;</a>


CSS:

A { line-height:16px; padding-left:35px; }
A:hover { background:url("prev.png"); background-repeat:no-repeat; }


Yes it really is that simple, no I haven't left anything out :D. In the anchor style I chose a line-height = image height (so that the image doesn't appear higgledy-piggledy with respect to the angle braces) and padding-left sufficient to prevent overlap of the image with the angle braces. This method is cross-browser compliant.

Mike.

Hey mike do you have a example png file? I tried it in paint and can't get the background or size right. What size did you make it?

Thanks

adam
mlse
02-06-2006, 12:08 PM
Hiya,

personally I would go with aerospace's solution, with a little fiddling to make sure the link stays a constant width (very similar to my original solution, but with an order change, as he pointed out).

If you want to do it with images, here's a quick demo I made, mainly for my own reference/amusement (because I think it looks good and I might use it myself with some different images) :D

http://www.silicasphere.co.uk/demos/hover-tricks/hover.html

The images I used were:
http://www.silicasphere.co.uk/demos/hover-tricks/prev.png
and
http://www.silicasphere.co.uk/demos/hover-tricks/next.png

To make them: open paint, choose font/size, type "prev" (or "next"), reposition, resize and save. If you want to fiddle with the colours, do it in the custom colurs panel.

Mike.
ciscoguy24
02-06-2006, 12:12 PM
Hiya,

personally I would go with aerospace's solution, with a little fiddling to make sure the link stays a constant width (very similar to my original solution, but with an order change, as he pointed out).

If you want to do it with images, here's a quick demo I made, mainly for my own reference/amusement (because I think it looks good and I might use it myself with some different images) :D

http://www.silicasphere.co.uk/demos/hover-tricks/hover.html

The images I used were:
http://www.silicasphere.co.uk/demos/hover-tricks/prev.png
and
http://www.silicasphere.co.uk/demos/hover-tricks/next.png

To make them, open paint, choose font/size, type "prev" (or "next"), reposition, resize and save. If you want to fiddle with the colours, just do it in the custom colurs panel.

Mike.


cool mike thanks!
ciscoguy24
02-06-2006, 12:39 PM
cool mike thanks!


Hey mike my page is at http://www.digitaleyesandears.com/testing/Two/center1.html

why doesn't the image stay right next to the >> ? I tried messing with the padding but no go


any ideas?
mlse
02-06-2006, 01:10 PM
Where you have specified width:6em within the inline style for the <A> tag, you need to specify padding-left:<whatever>px instead, or you need to decrease the width.

Since you are using display:block here (which allows you to specify an element width, as you have done) and you don't want the word "prev" in any kind of fancy font (I assume you don't!), I would go ahead and use the <span> solution given by aerospace (because you can specify the width, you can ensure that the chevons remain in a fixed position within the block element). Try this variation on aerospace's solution (cut and paste into a text-editor and save as a .html file):


<!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">
a.extra {
font-family:sans-serif;
font-weight:bold;
font-size:12px;
color:#00F;
text-decoration:none;
background:none;
width:100px;
text-align:right;
display:block;
}
a.extra:hover {
color:#F00;
background:none;
}
a.extra span {
visibility:hidden;
}
a.extra:hover span {
visibility:visible;
}
</style>
</head>

<body>
<a href="#" class="extra"><span>prev</span> &lt;&lt;</a>
</body>
</html>
ciscoguy24
02-06-2006, 01:19 PM
Where you have specified width:6em within the inline style for the <A> tag, you need to specify padding-left:<whatever>px instead, or you need to decrease the width.

Since you are using display:block here (which allows you to specify an element width, as you have done) and you don't want the word "prev" in any kind of fancy font (I assume you don't!), I would go ahead and use the <span> solution given by aerospace (because you can specify the width, you can ensure that the chevons remain in a fixed position within the block element). Try this variation on aerospace's solution (cut and paste into a text-editor and save as a .html file):


<!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">
a.extra {
font-family:sans-serif;
font-weight:bold;
font-size:12px;
color:#00F;
text-decoration:none;
background:none;
width:100px;
text-align:right;
display:block;
}
a.extra:hover {
color:#F00;
background:none;
}
a.extra span {
visibility:hidden;
}
a.extra:hover span {
visibility:visible;
}
</style>
</head>

<body>
<a href="#" class="extra"><span>prev</span> &lt;&lt;</a>
</body>
</html>



ok thanks for all your help :)