mouse-overs in CSS

M

Mice Over

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
 
B

Barbara de Zoete

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>.
Click to expand...

<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>
 
M

Mice Over

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!
 
T

Toby Inkster

Mice said:
But my main question was this: the statements that use phrases like
"onmouseover" and "onmouseout" can be used in as style attributes
Click to expand...

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++)
els.onmouseover = myfunc1;
}

addLoadEvent(init_behaviours);
</script>

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

Neredbojias

To further the education of mankind, Edwin van der Vaart
Could you explain what you mean by a:focus :-?
Click to expand...

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.
 
B

Barbara de Zoete

Could you explain what you mean by a:focus :-?
Click to expand...

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.
 
E

Edwin van der Vaart

Barbara said:
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.
Click to expand...
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.
 
E

Els

Barbara said:
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.
Click to expand...

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

Edwin van der Vaart

Els said:
And if you'd like the same for IE, you'd have to add :active as well.
Click to expand...
Thanx.
Why isn't an option that both browsers does understand e.g. :tab instead
of (for IE) :active and (others) :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.
 
T

Toby Inkster

Edwin said:
Why isn't an option that both browsers does understand e.g. :tab instead
of (for IE) :active and (others) :focus.
Click to expand...

Having separate selectors for IE and other browsers is not by
design -- it's simply a bug in IE. Ideally, ":focus" would work
in all CSS-supporting browsers.
 
E

Els

Edwin said:
Why isn't an option that both browsers does understand e.g. :tab instead
of (for IE) :active and (others) :focus.
Click to expand...

Your :tab is in fact :focus. It's just IE that got it wrong, and I
don't see a reason why they'd get it right if you just named it :tab
instead of :focus ;-)
 
E

Edwin van der Vaart

Els said:
Your :tab is in fact :focus. It's just IE that got it wrong, and I
don't see a reason why they'd get it right if you just named it :tab
instead of :focus ;-)
Click to expand...
In that case. IE drop...
I'll keep in mind to use :focus.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info and issociate.de to duplicate this post.
 
E

Edwin van der Vaart

Toby said:
Having separate selectors for IE and other browsers is not by
design -- it's simply a bug in IE. Ideally, ":focus" would work
in all CSS-supporting browsers.
Click to expand...
Okay, an IE buggie.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info and issociate.de to duplicate this post.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript DOM 1
I need help fixing my website 2
colgroup + style + mouse over/out in table = sluggish response 0
Help with Visual Lightbox: Scripts 2
a tag style with css 12
How to keep an a:hover effect with css like "onMouseOut()"? 2
Performance problem with onMouseover in Internet Explorer 2
CSS hover image link not working in IE 1

Members online

Total: 37 (members: 3, guests: 34)
Robots: 441

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,050
Latest member
AngelS122

Latest Threads

Top