SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Traduim's Avatar
    Join Date
    Feb 2003
    Location
    Catalonia
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover on a input

    I'm working on a website and I'm using to class for the input buttons. One class is for buttons by default, and the second class is for onMouseOver.

    I'd like to know if it would be possible to make something like this:

    INPUT.nice {
    my css by default;
    }

    INPUT.nice:hover {
    my css onMouseOver;
    }

    I have tested this, and a lot of similar things, but none worked

    The point is to make it simpler than having to set onMouseOvers in aaaaaallllll my buttons.
    Josep Tarrés,
    traducción
    traductor

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The hover element in CSS2 was supposed to be available on most elements but most browsers only allow it on hyperlinks.

    Mozilla 1.2 and netscape 6.2 allow this:

    input {
    color: #FF0000;
    background-color: #FFFFCC;
    }
    input:hover{
    color: #FF0000;
    background-color: #66FF99;
    }

    <input type="submit" value="Submit" id="Submit">


    But the hover wont work on IE and most other browsers (unless it's used on a hyperlink).

    Are you using the input buttons to submit form information as I'm not sure why you would want mouseovers on loads of input buttons unless I'm missing the point.

    If you're talking about normal links you can change the background and borders in CSS to appear like buttons that change on hover (mouseover). You can see it in action here :
    http://www.alistapart.com/stories/taminglists/

    Hope some of this is of some use.

    Paul

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Tradium. You can use a DHTML Behavior to satisfy IE, and the :hover pseudo-class for Moz. DHTML Behaviors are pretty easy to make, so I'll jump right in on this one.

    DHTML Behaviors are just text-files with some special tags and scripting. Their extension is .htc

    Here's input_effects.htc
    Code:
    <public:component>
    
    	<public:attach event="onmouseover" onevent="overHandler()" />
    	<public:attach event="onmouseout" onevent="outHandler()" />
    
    	<script langauge="JScript">
    		function overHandler()
    		{
    			element.className = 'hover';
    		}
    		function outHandler()
    		{
    			element.className = '';
    		}
    	</script>
    
    </public:component>
    Now, this is real basic, but they can be more complicated. To continue my mini-tutorial, here's how we use this sucker. In your CSS
    Code:
    input {
    	color: #FF0000;
    	background-color: #FFFFCC;
    	behavior: url(path/to/file/input_effects.htc);
    	}
    input:hover{
    	color: #FF0000;
    	background-color: #66FF99;
    	}
    input.hover {
    	color: #FF0000;
    	background-color: #66FF99;
    	}
    And that's it! The only downside is you have to double the style declaration as a class, but in doing that, you get input rollovers for both browsers without having to to a bunch of source-code-polluting scripting [img]images/smilies/wink.gif[/img]

    I'll give you the link to the MSDN HTC reference.

    Happy coding!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Beetle,
    Couldn't you just comma-separate your :hover pseudo-class and the .hover class, like so?
    Code:
    input {
    	color: #FF0000;
    	background-color: #FFFFCC;
    	behavior: url(path/to/file/input_effects.htc);
    	}
    input.hover, input:hover{
    	color: #FF0000;
    	background-color: #66FF99;
    	}
    This will save some code/download time (albeit not very much ).

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ya, you sure could. I blame it on the lack of coffee, as I surely won't blame my own negligence
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •