onMouseOver with CSS, border property?

Forum Moderators: open

Message Too Old, No Replies

onMouseOver with CSS, border property?

Can an onMouseOver change CSS border property?

The_Warden

3:44 pm on May 28, 2003 (gmt 0)

I have the following CSS style for my INPUT elements. How can I alter this STYLE using an onMouseOver event to change the CSS border property, specifically the foreground color?


INPUT { background-color: #EEEEEE; font-family: verdana; border: #778899 1px solid; font-size: 12px; color: #000000; padding-top: 1px; padding-bottom: 1px; padding-left: 3px; padding-right: 0px; }

BlobFisk

3:52 pm on May 28, 2003 (gmt 0)

Hey The_Warden,

onmouseover is not a valid attribute for an input box (see the W3C Input info [w3.org] on this).

You could use an onFocus and onBlur to change the colour - would that suffice?

The_Warden

4:04 pm on May 28, 2003 (gmt 0)

Hi BlobFisk, thanks for the reply again :).

onmouseover is not a valid attribute for an input box (see the W3C Input info on this).

Geez your right. I should double check things like that before posting so I do not feel like an idiot :). I've always reference those docs for some reason I didn't this time. Anyways...

You could use an onFocus and onBlur to change the colour - would that suffice?

Mmm would that work, onFocus to capture the event of the mouse over top of the INPUT element and onBlur to capture the event of leaving? Would I use the below code to change the border property of the style? Or how would I go about doing that? Tried the below code but didn't seem to work.

BTW, the below code worked fine when applying this to table rows using onMouseOver and onMouseOut events.


OnFocus="this.className='border2'" OnBlur="this.className='border1'"

WibbleWobble

4:17 pm on May 28, 2003 (gmt 0)

Would onfocus not require you to click the element? Either that, or it would change as soon as you entered the <form> display, surely?

BlobFisk

4:32 pm on May 28, 2003 (gmt 0)

Yep, onFocus only applies if you click on the input.

You could wrap it in an anchor and use document.getElementById('inputName').style.background on an onMouseOver and onMouseOut event. It might work...

papabaer

5:17 pm on May 28, 2003 (gmt 0)

CSS2 - input:hover {your style}

Too bad IE has such weak CSS2 support. ;)

The_Warden

4:01 am on Jun 7, 2003 (gmt 0)

Okay thanks. I'll see if an anchor or DOM will work. Would be a nie affect to change the look of a input button when moused over.

dougmcc1

8:28 pm on Jul 8, 2003 (gmt 0)

<html><head>
<style>
.1 {background-color:#006699; color:white; font-weight:bold; text-align:center; border:outset 2px #cccccc;
cursor:hand; width:100px; }
.2 {background-color:#2288bb; color:white; font-weight:bold; text-align:center; border:outset 2px #cccccc;
cursor:hand; width:100px}
.3 {background-color:black; color:white; font-weight:bold; text-align:center; border:outset 2px #cccccc;
cursor:hand; width:100px }
</style>
<script>function message1() { alert('Message 1') }</script>
<script>function message2() { alert('Message 2') }</script>
</head><body>
<b>Click</b>:
<input type="button" class="1" value="Message 1"
onMouseover="this.className='2'"
onMouseout="this.className='1'"
onClick="message1()"
onMousedown="this.className='3'"
onMouseup="thisclassName='2'">

</body></html>

Courtesy of:
[experts-exchange.com ]

[edited by: tedster at 8:57 pm (utc) on July 8, 2003]
[edit reason] turn off smile graphics [/edit]

drbrain

8:57 pm on Jul 8, 2003 (gmt 0)

You can't start a class name with a number, unless its escaped. You need to use something like 'style1'.

Try this simple test case:

p { color: green }
.1 { color: red }

<p class="1">This text should be green

dougmcc1

9:01 pm on Jul 8, 2003 (gmt 0)

Hm numbers work fine for me. I copied the code right from the page source.

"Try this simple test case"
Try mine as well :)

dougmcc1

9:08 pm on Jul 8, 2003 (gmt 0)

Actually the text came out red. I'm sure using numbers as CSS function names is bad coding though.

drbrain

9:10 pm on Jul 8, 2003 (gmt 0)

The CSS you posted shows unstyled buttons in Gecko browsers (Moz, NS), shows unstyled buttons in IE6 in standards mode, and fails to validate in the CSS Validator.

dougmcc1

9:27 pm on Jul 8, 2003 (gmt 0)

Yeah I wasn't thinking about validated code or browser compatibility when I posted the exmaple. I figured The_Warden would change those anyways. But I'm glad you mentioned it for those of us who didn't know the difference.