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
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
710 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

792 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