?
Solved

Can I use CSS only (no JavaScript "onmouseover" or "onblur", etc.) to change hover background color of ASP.NET Text Box Web Control???

Posted on 2004-10-13
10
Medium Priority
?
732 Views
Last Modified: 2012-05-05
I am trying to use CSS only to make an ASP.NET Text Box Web Control change background colors when the mouse is over the control.

I know I can use "onmouseover" events, etc. with JavaScript ... I have already proven this.  However, what I want to do is use CSS only to get desired effect.  What I would end up with is an ASP.NET Text Box control with a class attribute set, but without a bunch of JavaScript functions being referenced.

I am very new to web development, and found an article that showed something along these lines, but it was using a div and an anchor tag.  Can I use CSS only to achieve this??? Here is the sample I found that works on a div/anchor:

<html>
      <head>
            <title>Untitled</title>
            <style> ..box { background-color: white; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; }
      ..box a:active, a:link, a:visited { font-family : Arial, Helvetica; color : blue; text-decoration : none; }
      ...box a:hover { background-color: lightblue; font-family : Arial, Helvetica; color : black; text-decoration : none; }
      </style>
      </head>
      <body>
            <div class="box"><a href="#">some text</a></div>
            <br>
      </body>
</html>
0
Comment
Question by:das165227
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12302251
Couple of things...

1. Internet Explorer can only change properties onmousover if there is an <a> tag involved. To have it recreate this effect for any other element requires javascript, period.

2. Other recent browsers (Mozilla, Opera, Safari, etc.) can apply the hover to just about anything, so you'll need to advise what your target market is before going much further...

Sean
0
 
LVL 11

Expert Comment

by:neester
ID: 12302680
The better browsers have support for many more psudo tags other than just :hover.
They also support :focus -- Which is one that I use a lot.
But IE doesnt support neither, so you will need to goto JavaScript for your answers.
Simple like this:

<textarea onmouseover="this.style.borderColor='red';" onmouseout="this.style.borderColor='#e6e6e6';" name="text"></textarea>
0
 
LVL 11

Expert Comment

by:neester
ID: 12302749
Well that applies to whatever tag/element you like.
Just add those two onmouse events
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1500 total points
ID: 12302876
This coding is a little on the strange side, but it does work for both IE and Moz:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title> hover input</title>
<style type="text/css">
a {background-color:blue; text-decoration:none;}
a:hover {background-color:red;text-decoration;}
</style>
</head>
<body>
<a href="#"><input style="background-color:transparent" type="text"></a>
</body>
</html>

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12302927
A little?

Courtesy of the html validator:

Line 11, column 11: document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

<a href="#"><input style="background-color:transparent" type="text"></a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").



You didn't honestly think I'd let you get away with that did you :-)
Sean
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12303049
I never said it was to standard.  I just said it works.  

The only reason I put the strict doctype in was to see if you had to be in quirks mode for it to work. :^)

Cd&
0
 
LVL 11

Expert Comment

by:neester
ID: 12303628
You can really hack up IE.
I have tried things like this before:

<style>
      a div {background-color: #F00;}
      a:hover div {background-color: #0F0;}
</style>

<a href="javascript: void(0);">
      <div>
            HELLO THERE MATE!
      </div>
</a>

you get very strange behaviour...
0
 

Author Comment

by:das165227
ID: 12310864
The accepted answer actually made the background color change when hovering over the text box, but you can no longer select text in the text box with the mouse, and when you click on the text box (IE 6), the cursor changes to a hand (like when hovering over a hyperlink).

Unfortunately, it just looks like I cannot have everything that I want without resorting to adding more JavaScript.  
0
 

Author Comment

by:das165227
ID: 12310886
I am using Visual Studio 2003 ... do you think it is referring to older CSS options?  Is there a good resource to find new CSS style options?  I was told that Visual Studio 2005 has a ton more style options.  Could I use them in Visual Studio 2003?

I am new at web development, but want to make sure that I am not using some really old styles when there are newer and better ones.

Thanks!
0
 
LVL 11

Expert Comment

by:neester
ID: 12312467
You have chosen the answer already so we shoulndt be answering more - but I will.
If you look at the 1st few posts.
You will see we said that there is a way of doing what you want.
Just NOT compatable with IE

VS2003 has nothing to do with IE.
I have VS6, its like trying to get your car to go 300km/h - and saying that you have a 6 bedroom house...

VS2003 and IE are totally unrelated.
If you decide to use javascript - then  my answer I gave will work perfect.
Why didnt you want to use javascript in teh 1st place?
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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 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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month10 days, 6 hours left to enroll

762 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