Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > mouse-overs in CSS

Reply
Thread Tools

mouse-overs in CSS

 
 
Mice Over
Guest
Posts: n/a
 
      04-28-2006
Hello,

new to html and learning some CSS...

notice in some in-line style statments, you can use onmouseover, onmouseout
statements to control hover features of links or table cells.

instead of implanting the lengthly style description in every TD, I'm
wondering, can onmouseover (etc) statements be built into style defn's in a
seperate CSS file or in a style statement in the <head>.

seems to me that the "onmousewhatever" stuff is javascript, right? and JS
can / cant be used in CSS statements?

thanks for any wisdom

Daniel


 
Reply With Quote
 
 
 
 
Barbara de Zoete
Guest
Posts: n/a
 
      04-28-2006
On Fri, 28 Apr 2006 09:52:49 +0200, Mice Over <(E-Mail Removed)> wrote:

> notice in some in-line style statments, you can use onmouseover,
> onmouseout
> statements to control hover features of links or table cells.
>
> instead of implanting the lengthly style description in every TD, I'm
> wondering, can onmouseover (etc) statements be built into style defn's
> in a
> seperate CSS file or in a style statement in the <head>.


<URL:http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>

Example, markup:
<ul id="menu">
<li><a href="home.html">home</a></li>
<li><a href="sitemap.html">sitemap</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test2.html">test 2</a></li>
<li><a href="contact.html">contact.html</a></li>
</ul>

Example, styles (in the head of the page):
<style type="text/css">
#menu {
float:left;
margin:0 2em 1em 0;
width:8em; }

#menu ul {
list-style:none;
margin:0;
padding:0; }

#menu a {
display:block;
width:100%;
text-decoration:none;
background-color:yellow;
color:black; }

#menu a:hover, #menu a:visited {
background-color:black;
color:yellow; }

#menu a:active {
background-color:rgb(130,130,130); }
</style>

There are many good recourses on line. Try Google
<URL:http://www.google.com/search?q=CSS+navigation+menu>


--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
 
Reply With Quote
 
 
 
 
Barbara de Zoete
Guest
Posts: n/a
 
      04-28-2006
On Fri, 28 Apr 2006 10:08:21 +0200, Barbara de Zoete
<(E-Mail Removed)> wrote:

> #menu a:hover, #menu a:visited {
> background-color:black;
> color:yellow; }


Wanted to say:

#menu a:hover, #menu a:focus {
... }


--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
 
Reply With Quote
 
Mice Over
Guest
Posts: n/a
 
      04-29-2006
Thanks Barbara,

Interesting possibilities arise, using <UL>'s as navigation bars! something
I hadn't considererd.
But my main question was this: the statements that use phrases like
"onmouseover" and "onmouseout" can be used in as style attributes, say in
<td> tags, making the entire cell "clickable", but can these very phrases be
used in seperate style sheets or in style def's in the <head> of the doc as
you outlined below. Not just the a:hover psuedoclass, but actual words like
"onmouseover, do this, do that, etc".

make sense?

thanks!


"Barbara de Zoete" <(E-Mail Removed)> wrote in message
newsp.s8pkv7arl8uz2z@zoete_b...
> On Fri, 28 Apr 2006 09:52:49 +0200, Mice Over <(E-Mail Removed)> wrote:
>
>> notice in some in-line style statments, you can use onmouseover,
>> onmouseout
>> statements to control hover features of links or table cells.
>>
>> instead of implanting the lengthly style description in every TD, I'm
>> wondering, can onmouseover (etc) statements be built into style defn's
>> in a
>> seperate CSS file or in a style statement in the <head>.

>
> <URL:http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>
>
> Example, markup:
> <ul id="menu">
> <li><a href="home.html">home</a></li>
> <li><a href="sitemap.html">sitemap</a></li>
> <li><a href="test.html">test</a></li>
> <li><a href="test2.html">test 2</a></li>
> <li><a href="contact.html">contact.html</a></li>
> </ul>
>
> Example, styles (in the head of the page):
> <style type="text/css">
> #menu {
> float:left;
> margin:0 2em 1em 0;
> width:8em; }
>
> #menu ul {
> list-style:none;
> margin:0;
> padding:0; }
>
> #menu a {
> display:block;
> width:100%;
> text-decoration:none;
> background-color:yellow;
> color:black; }
>
> #menu a:hover, #menu a:visited {
> background-color:black;
> color:yellow; }
>
> #menu a:active {
> background-color:rgb(130,130,130); }
> </style>
>
> There are many good recourses on line. Try Google
> <URL:http://www.google.com/search?q=CSS+navigation+menu>
>
>
> --
> ______PretLetters:
> | weblog | http://www.pretletters.net/weblog/weblog.html |
> | webontwerp | http://www.pretletters.net/html/webontwerp.html |
> |zweefvliegen | http://www.pretletters.net/html/vliegen.html |



 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      04-29-2006
Mice Over wrote:

> But my main question was this: the statements that use phrases like
> "onmouseover" and "onmouseout" can be used in as style attributes


onmouseover / onmouseout are HTML attributes that fire event handling
code, usually written in Javascript -- they have nothing to do with CSS as
such.

What I think you're trying to ask is: "is there a way of assigning
code to happen in response to events without littering my code with lots
of onmouseover attributes?"

The answer is yes, but it doesn't involve CSS. Here's a quick example:

<script type="text/javascript">
// Utility function -- this is often useful!
function addLoadEvent (func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}

function myfunc1 ()
{
window.alert("Hello");
}

function init_behaviours ()
{
var els = document.getElementsByTagName("TD");
for (var i=0; els[i]; i++)
els[i].onmouseover = myfunc1;
}

addLoadEvent(init_behaviours);
</script>

This will attach the behaviour "myfunc1" to all table cells onmouseover
events.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./b52s_-_love_shack.ogg

 
Reply With Quote
 
Edwin van der Vaart
Guest
Posts: n/a
 
      04-29-2006
Barbara de Zoete wrote:
> On Fri, 28 Apr 2006 10:08:21 +0200, Barbara de Zoete
> <(E-Mail Removed)> wrote:
>
>> #menu a:hover, #menu a:visited {
>> background-color:black;
>> color:yellow; }

>
>
> Wanted to say:
>
> #menu a:hover, #menu a:focus {
> ... }

Could you explain what you mean by a:focus
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Under construction
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info and issociate.de to duplicate this post.
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      04-29-2006
To further the education of mankind, Edwin van der Vaart
<(E-Mail Removed)> vouchsafed:

>> Wanted to say:
>>
>> #menu a:hover, #menu a:focus {
>> ... }


> Could you explain what you mean by a:focus


Whenever a link element has the focus. This is sometimes indicated by a
dashed "focus ring" surrounding the link, and css can be used to provide
different styles to said element.

--
Neredbojias
Infinity has its limits.
 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      04-29-2006
On Sat, 29 Apr 2006 21:48:32 +0200, Edwin van der Vaart
<(E-Mail Removed)> wrote:

> Barbara de Zoete wrote:
>
>> Wanted to say:
>> #menu a:hover, #menu a:focus {
>> ... }

>
> Could you explain what you mean by a:focus


If you don't use a mouse, you can 'tab' your way through a page. With
every time you hit the tab key, you move to a next hyper link in a page
(if the page is build properly). While 'tabbing' from link to link you
give the hyper links focus one after another, like you could do by
hovering over them (sort off). Which is why I give the pseudo classes
:hover and :focus the same features.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
 
Reply With Quote
 
Edwin van der Vaart
Guest
Posts: n/a
 
      04-29-2006
Barbara de Zoete wrote:
> On Sat, 29 Apr 2006 21:48:32 +0200, Edwin van der Vaart
> <(E-Mail Removed)> wrote:
>> Barbara de Zoete wrote:
>>> Wanted to say:
>>> #menu a:hover, #menu a:focus {
>>> ... }

>>
>>
>> Could you explain what you mean by a:focus

>
> If you don't use a mouse, you can 'tab' your way through a page. With
> every time you hit the tab key, you move to a next hyper link in a page
> (if the page is build properly). While 'tabbing' from link to link you
> give the hyper links focus one after another, like you could do by
> hovering over them (sort off). Which is why I give the pseudo classes
> :hover and :focus the same features.

I see. Thanx for the info.
I'll try it on one of mine site.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Under construction
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info and issociate.de to duplicate this post.
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      04-29-2006
Barbara de Zoete wrote:

> While 'tabbing' from link to link you
> give the hyper links focus one after another, like you could do by
> hovering over them (sort off). Which is why I give the pseudo classes
> :hover and :focus the same features.


And if you'd like the same for IE, you'd have to add :active as well.

--
Els http://locusmeus.com/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments