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
709 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
  • 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

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.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

813 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

14 Experts available now in Live!

Get 1:1 Help Now