Solved

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

Posted on 2004-04-18
8
2,963 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
Comment Utility
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
Comment Utility
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 150 total points
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 7

Expert Comment

by:madwax
Comment Utility
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
Comment Utility
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 100 total points
Comment Utility
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
Comment Utility
Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now