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
718 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
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!

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

696 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