[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 751
  • Last Modified:

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

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
das165227
Asked:
das165227
  • 4
  • 2
  • 2
  • +1
1 Solution
 
seanpowellCommented:
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
 
neesterCommented:
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
 
neesterCommented:
Well that applies to whatever tag/element you like.
Just add those two onmouse events
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
COBOLdinosaurCommented:
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
 
seanpowellCommented:
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
 
COBOLdinosaurCommented:
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
 
neesterCommented:
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
 
das165227Author Commented:
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
 
das165227Author Commented:
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
 
neesterCommented:
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!

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now