control style set by css

fatjimi · Jun 6, 2002

I'm using a style sheet to control the class of my div tags,

(I'd like to stick to this method as a designer is going to alter the css file to change the look of the site once I've put the layout and all the php)

and I'd like to have it so that the border color of a div tag changes on mouse over.

the border has been set in the css include file by
border-left:3px solid #EEEEEE;
border-right:3px solid #EEEEEE;
border-top:3px solid #EEEEEE;
border-bottom:3px solid #EEEEEE;

Here are some of the solutions I'm trying or considering

a)have 2 classes, one for mouseover and one for mouseout
and having something like
<div onMouseOut="class='class1'" onMouseOver="class='class2'">

I've tried this and just get a message on load telling me that theres a syntax error on line 1

b)Somehow include in the css include file the commands for mouseover and mouseout, is this possible???;

c)Change the properties of the class but just for the one div tag, even though they're all sharing the same class

I think this is impossible, but is there a trick round it,
ie if I set all properties other than the ones I would like to be dynamic, can I then set these properties using javascript.

Boomerang · Jun 7, 2002

Try this example:

<HTML>
<HEAD>
<TITLE></TITLE>
<style>
div.style1
{
border-left:3px solid green;
border-right:3px solid red;
border-top:3px solid blue;
border-bottom:3px solid yellow;
}

div.style2
{
border-left:3px solid #EEEEEE;
border-right:3px solid #EEEEEE;
border-top:3px solid #EEEEEE;
border-bottom:3px solid #EEEEEE;
}
</style>
</HEAD>
<BODY>
<div class="style2" onmouseover="this.className='style1'" onmouseout="this.className='style2'">mydiv</div>
<br>
</BODY>
</HTML>

Beware: the javascript part this.className is case sensitive !

Hope this helps,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

control style set by css

fatjimi

Programmer

Boomerang

Programmer

Similar threads

Part and Inventory Search

Sponsor