Hi everyone,
Quick question which I'm sure may be easy to answer...
A client of mine is wanting the following to his links....
A page of text where links are shown as blue.
When he hovers over a 'paragraph' of text, the links remain blue, but now a background of light blue are highlighting the links.
When her hovers over the link, the text changes to red and the highlight goes red.
Thing is, whilst I can do the 'active' and 'hover' style no problems, I'm having immense difficulty in assigning the A tag if the user is/is not hovering over the paragraph.
Any ideas on how I can do this?
TIAThat requires the application of some simple JavaScript :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Lorem</title>
<style type="text/css">
<!--
a {backround-color:#fff; color:#00f}
a.highlight {background-color:#add8e6; color:#00a}
-->
</style>
<script type="text/javascript">
<!--
if (document.getElementById) onload = function () {
var p, i = 0;
while (p = document.getElementsByTagName('P')[i++]) {
p.onmouseover = function () {var a, i = 0; while (a = this.getElementsByTagName('A')[i++]) {a.className = 'highlight'}};
p.onmouseout = function () {var a, i = 0; while (a = this.getElementsByTagName('A')[i++]) {a.className = ''}};
}
}
// -->
</script>
</head>
<body>
<p>Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Eodem <a href=http://www.webdeveloper.com/forum/archive/index.php/"modo.html">modo</a> typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. </p>
<p>Nam liber tempor *** <a href=http://www.webdeveloper.com/forum/archive/index.php/"soluta.html">soluta</a> nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</body>
</html>Hi, thanks for the reply charles, much appreciated.
I agree with you, however, my client has suggested this site (<!-- m --><a class="postlink" href="http://linuxart.com/log/">http://linuxart.com/log/</a><!-- m -->) which I don't think uses any javascript but does exactly what he wants.
I've tried looking at the CSS but just can't see how it's been done.<style type="text/css">
<!--
a {backround-color:#fff; color:#00f}
p:hover a {background-color:#add8e6; color:#00a}
-->
</style>
You'll note, however, that the folks at Microsoft haven't yet figured out how to implement it.Thanks again charles, it makes sense now, will look into that....Right, been playing about with it and having a bit of joy.
Here's the HTML I have so far...
<div class="container">
<div class="title">title</div>
<div class="dat">dat</div>
<div class="body">body <a href=http://www.webdeveloper.com/forum/archive/index.php/"jkjkk">with a link</a></div>
<div class="bottomlinks">bottom <a href=http://www.webdeveloper.com/forum/archive/index.php/"kl">links</a></div>
</div>
and here's the CSS
.container
{
font-size: 12pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.container .body a
{
text-decoration:none;
color:Blue;
}
.container .bottomlinks a
{
text-decoration:none;
color:Red;
}
.container:hover a
{
background-color:#EEEEFF;
color:Blue
}
.title
{
font-weight: bold;
font-size: 14pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.dat
{
font-size: 8pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.body
{
font-size: 12pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.body a:hover
{
font-size: 12pt;
font-family: trebuchet ms, verdana, sans-serif;
background-color:#FFEEEE;
color:Red
}
.bottomlinks
{
font-size: 10pt;
font-family: trebuchet ms, verdana, sans-serif;
}
Now I understand that this perhaps wouldn't work at all in IE, but it should work in Firefox - which it isn't.
I thought I was doing it right, by having a 'hover' attached to my container class, and everything is in the container).
I've even gone as far as changing the ".container:hover" so it simply changes the entire div background black but again, this doesn't work.
I'm sure there's something simple I'm missing - any ideas?
TIAOriginally posted by Charles
<style type="text/css">
<!--
a {backround-color:#fff; color:#00f}
p:hover a {background-color:#add8e6; color:#00a}
-->
</style>
You'll note, however, that the folks at Microsoft haven't yet figured out how to implement it.
true, however vladdy explained how you could fix (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/iepseudoclassesfix.html">http://www.vladdy.net/Demos/iepseudoclassesfix.html</a><!-- m -->) this using a .htc file. This will allow it to work on IE as well and works GREAT
very easy and works perfect
also, not sure exactly why yours isnt working. One thing you may want to check is that you are using a proper doctype. But yea, the .htc will allow you to use :hover and the other psuedo element active for all elements that you want
very sweet
Quick question which I'm sure may be easy to answer...
A client of mine is wanting the following to his links....
A page of text where links are shown as blue.
When he hovers over a 'paragraph' of text, the links remain blue, but now a background of light blue are highlighting the links.
When her hovers over the link, the text changes to red and the highlight goes red.
Thing is, whilst I can do the 'active' and 'hover' style no problems, I'm having immense difficulty in assigning the A tag if the user is/is not hovering over the paragraph.
Any ideas on how I can do this?
TIAThat requires the application of some simple JavaScript :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Lorem</title>
<style type="text/css">
<!--
a {backround-color:#fff; color:#00f}
a.highlight {background-color:#add8e6; color:#00a}
-->
</style>
<script type="text/javascript">
<!--
if (document.getElementById) onload = function () {
var p, i = 0;
while (p = document.getElementsByTagName('P')[i++]) {
p.onmouseover = function () {var a, i = 0; while (a = this.getElementsByTagName('A')[i++]) {a.className = 'highlight'}};
p.onmouseout = function () {var a, i = 0; while (a = this.getElementsByTagName('A')[i++]) {a.className = ''}};
}
}
// -->
</script>
</head>
<body>
<p>Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Eodem <a href=http://www.webdeveloper.com/forum/archive/index.php/"modo.html">modo</a> typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. </p>
<p>Nam liber tempor *** <a href=http://www.webdeveloper.com/forum/archive/index.php/"soluta.html">soluta</a> nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</body>
</html>Hi, thanks for the reply charles, much appreciated.
I agree with you, however, my client has suggested this site (<!-- m --><a class="postlink" href="http://linuxart.com/log/">http://linuxart.com/log/</a><!-- m -->) which I don't think uses any javascript but does exactly what he wants.
I've tried looking at the CSS but just can't see how it's been done.<style type="text/css">
<!--
a {backround-color:#fff; color:#00f}
p:hover a {background-color:#add8e6; color:#00a}
-->
</style>
You'll note, however, that the folks at Microsoft haven't yet figured out how to implement it.Thanks again charles, it makes sense now, will look into that....Right, been playing about with it and having a bit of joy.
Here's the HTML I have so far...
<div class="container">
<div class="title">title</div>
<div class="dat">dat</div>
<div class="body">body <a href=http://www.webdeveloper.com/forum/archive/index.php/"jkjkk">with a link</a></div>
<div class="bottomlinks">bottom <a href=http://www.webdeveloper.com/forum/archive/index.php/"kl">links</a></div>
</div>
and here's the CSS
.container
{
font-size: 12pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.container .body a
{
text-decoration:none;
color:Blue;
}
.container .bottomlinks a
{
text-decoration:none;
color:Red;
}
.container:hover a
{
background-color:#EEEEFF;
color:Blue
}
.title
{
font-weight: bold;
font-size: 14pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.dat
{
font-size: 8pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.body
{
font-size: 12pt;
font-family: trebuchet ms, verdana, sans-serif;
}
.body a:hover
{
font-size: 12pt;
font-family: trebuchet ms, verdana, sans-serif;
background-color:#FFEEEE;
color:Red
}
.bottomlinks
{
font-size: 10pt;
font-family: trebuchet ms, verdana, sans-serif;
}
Now I understand that this perhaps wouldn't work at all in IE, but it should work in Firefox - which it isn't.
I thought I was doing it right, by having a 'hover' attached to my container class, and everything is in the container).
I've even gone as far as changing the ".container:hover" so it simply changes the entire div background black but again, this doesn't work.
I'm sure there's something simple I'm missing - any ideas?
TIAOriginally posted by Charles
<style type="text/css">
<!--
a {backround-color:#fff; color:#00f}
p:hover a {background-color:#add8e6; color:#00a}
-->
</style>
You'll note, however, that the folks at Microsoft haven't yet figured out how to implement it.
true, however vladdy explained how you could fix (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/iepseudoclassesfix.html">http://www.vladdy.net/Demos/iepseudoclassesfix.html</a><!-- m -->) this using a .htc file. This will allow it to work on IE as well and works GREAT
very easy and works perfectalso, not sure exactly why yours isnt working. One thing you may want to check is that you are using a proper doctype. But yea, the .htc will allow you to use :hover and the other psuedo element active for all elements that you want
very sweet