?
Solved

Adding a 'hover' CSS color effect for text within label tags...

Posted on 2004-04-18
8
Medium Priority
?
3,038 Views
Last Modified: 2008-02-01
Hello,

I am looking for a 'hover' CSS color effect for text within label tags similar to what one would see for an <a href> link when hovering over the link text.  I'd like the color of the text to change to red when the mouse moves over the text within the label tags.

For example, here is the code that I need to function as suggested above:

<b><label style="cursor:hand;" onClick="document.forms['sites'].elements['buttons'][27].click()">SD</label></b><br>
<input type="radio" name="buttons" value="29" onClick="dataBase(this.form)">

I am hopeful that this can be done with CSS.

Thanks,

Kevin
0
Comment
Question by:lkkl
  • 3
  • 3
  • 2
8 Comments
 
LVL 7

Expert Comment

by:madwax
ID: 10853894
I managed to do this with the normal css construction XXX:hover and it works in Opera but for some strange reason it doesn't work with IE, but I haven't been friend with my IE the last couples of days. But you can try it, maybe it works on your computer.

code:

<html>
<head>
</head>

<style>
#myLabel{
      color: red;
}

#myLabel:hover{
      color: blue;
}
</style>

<body>
<b><label id="myLabel" style="cursor:hand;" onClick="document.forms['sites'].elements['buttons'][27].click()">SD</label></b><br>
<input type="radio" name="buttons" value="29" onClick="dataBase(this.form)">

</body>
</html>

working example: http://www.madwax.nu/test.php

Good luck,
//jan
0
 

Author Comment

by:lkkl
ID: 10853975
Jan,

Thanks for the reply.

Yes, your red color works fine in Internet Explorer, but I cannot get the hover effect color to change to blue.

I would rather not have to resort to <a href> links and further JavaScript, as I am already doing that behind the scenes with the onClick code.

Any other thoughts?

Kevin
0
 
LVL 7

Assisted Solution

by:madwax
madwax earned 600 total points
ID: 10854043
Well, I thought it was only my IE that was strange today because as I said it worked with Opera.
You can do it with JavaScript (i.e. DHTML) and it isn't to much code. Just look at the onMouseOver and onMouseOut event-handlers below. That works in my IE.

<b><label style="cursor:hand;" onMouseOver="this.style.color='blue'" onMouseOut="this.style.color='red'" onClick="document.forms['sites'].elements['buttons'][27].click()">SD</label></b><br>
<input type="radio" name="buttons" value="29" onClick="dataBase(this.form)">

Good luck,
//jan
0
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10854105
IE does not support hover on any element except <a>

So you have three options:

1.  Use mouseover on the label
2.  Put a link inside the label like this: <label><a href="#">SD</a></label>
3.  Change your design.

Cd&


0
 
LVL 7

Expert Comment

by:madwax
ID: 10854122
Well, than I learned something new today as well.

But COBOLdinosaur:
So the list on: http://css.maxdesign.com.au/listamatic2/vertical03.htm wouldn't work with the hovers if it didn't use tha a:s?

0
 

Author Comment

by:lkkl
ID: 10854287
madwax,

Your solution is working perfectly, thanks!

One other question, rather than assign the onMouseOver and the onMouseOut a specific color:  "this.style.color='red'", could I assign it to a CSS name, i.e. citycolor, so that I could continue to use all CSS?

Thanks,

Kevin
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 400 total points
ID: 10854455
madwax,

Yeah for IE the a has to be in there some where:

a.class:hover a#id:hover .class a:hover #id a:hover etc all work cross-browser, but IE keeps falling further and further behind in CSS support.

 lkkl,

you could just swap the className:

.citycolor {atributes...
.countrycolor {attributes...

Then onmouseover="this.className='citycolor'"

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10859205
Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month5 days, 16 hours left to enroll

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question