Button hover css

This here is a bit sluggish. That means, under MAC Safari ver xx something there were some pixel-wise declinations or like. And so it remained because the wind changed meanwhile. Anyway, code samples here below give some glue how to deal with the button hover css.

Default button

Default textbox, button and link. They look very different across the browsers.

Link

Button based on <input> element

<span class="button-outer">
	<span class="button-inner">
		<input class="button-input" type="submit" value="this is an input element" />
	</span>
</span><br />

.button-outer{
	background:url(button-standard-left.png) left center no-repeat;
	float:left;
	width:auto;
}
.button-inner{
	background:url(button-standard-right.png) right center no-repeat;
	float:left;
	height:22px;/*Chrome is beaten off still*/
	width:auto;
}
.button-inner:hover{
	background:url(button-rollover-right.png) right center no-repeat;
}
.button-outer:hover{
	background:url(button-rollover-left.png) left center no-repeat;
}
.button-input{
	background:none;
	border:none;
	cursor:pointer;
	font-size:13px;/*Opera*/
	line-height:22px;/*hover for IE and text placement for FF*/
	overflow:visible;/*button width for IE*/
	padding-left:10px;
	padding-right:10px;
	padding-top:2px;
}

Button based on <a> element

this is a link

<span class="button-outer">
<span class="button-inner">
		<a class="button-link" href="#">this is a link</a>
</span>
</span><br />

.button-outer{
	background:url(button-standard-left.png) left center no-repeat;
	float:left;
	width:auto;
}
.button-inner{
	background:url(button-standard-right.png) right center no-repeat;
	float:left;
	height:22px;/*Chrome is beaten off still*/
	width:auto;
}
.button-inner:hover{
	background:url(button-rollover-right.png) right center no-repeat;
}
.button-outer:hover{
	background:url(button-rollover-left.png) left center no-repeat;
}
.button-link:link,
.button-link:visited,
.button-link:hover,
.button-link:active{
	color:#000;
	display:block;/*FF*/
	font-family:arial;
	font-size:13px;
	margin-top:1px;/*to center the text after declaring display:block*/
	padding-left:10px;
	padding-right:10px;
	text-decoration:none;
}

Button based on <button> element

By neccessity .buttonElement can be applied float:left; and width:auto;

<button class="buttonElement" type="submit">
	<span class="buttonOuter">
		<span class="buttonInner">
			this is a button element
		</span>
	</span>
</button>

.buttonElement{
	background:none;
	border:none;
	cursor:pointer;
	font-size:0;
	height:1%;
	overflow:visible;
}
.buttonOuter{
	background:url(button-standard-right.png) right center no-repeat;
	display:block;
	height:22px;
	letter-spacing:0;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
	padding-right:10px;
	text-align:center;
	text-decoration:none;
}
.buttonInner{
	background:url(button-standard-left.png) left center no-repeat;
	color:#000;
	display:block;
	font-size:13px;
	line-height:22px;
	padding-left:10px;
	white-space:nowrap;
}
.buttonElement:hover .buttonInner{
	background:url(button-rollover-left.png) left center no-repeat;
}
.buttonElement:hover .buttonOuter{
	background:url(button-rollover-right.png) right center no-repeat;
}

IE hover - IE6 hover

This below is raw and un systemised material, picked up on some stage dealing with the IE6 hover issues.

2009-02-06

Google: trigger ie6 hover

Results:

This time, I did not trigger the effect by giving a:hover a colour, but by using this rule instead:

a:hover{
	background-color:white;
}

IE6 triggers:: color:red; background-color:white; text-decoration:none; background-position:left top; font-weight:bold; visibility: visible;

The important thing is, that whichever style you want to use for this "IE-hover-trigger", it must be in contrast with the styles for a:link and a:visited, in order to make it work.

For example: if your link text is already bold, setting the a:hover style to font-weight:bold won't make the link styles change on hover, and thus it will not trigger the hover effect on the image either. The same is true for any other style.

	a:hover{
		color:red;
	}
	a:link img,
	a:visited img{
		border:5px solid green;
	}
	a:focus img,
	a:hover img,
	a:active img{
		border:5px dashed red;
	}

JavaScript IE6 :hover

Re: I need a JavaScript IE6 :hover on a class name rather than an element please?

Free Web Designer Directory

This script allows for using many different class names, and hence applying different styles. Class names can be applied to any element, and the script won't interfer with other class names that may be added to the element, or with any other javscript that may be running.

function getElementsByClassName(oElm, strTagName, strClassName) {
	var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName),
	  arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	for(var i=0; i<arrElements.length; i++)
		if(oRegExp.test(arrElements[i].className))
			arrReturnElements.push(arrElements#91;i]);
	return (arrReturnElements);
}
function changeClass(o, h) {
  var e = getElementsByClassName(document, "*", o);
  for(var i=0;i<e.length;i++) {
	e[i].origClass = o;
	e[i].hoverClass = h;
	e[i].onmouseover = function() {
	  this.className = this.className.replace(this.origClass, this.hoverClass);
	};
	e[i].onmouseout = function() {
	  this.className = this.className.replace(this.hoverClass, this.origClass);
	};
  }
}
function addEvent(obj, evt, func) {
  if(obj.addEventListener) obj.addEventListener(evt, func, false);
  else if(obj.attachEvent) obj.attachEvent("on" + evt, func);
  else obj['on' + evt] = func;
}
addEvent(window, "load",
  function() {
  changeClass("default", "hover");
  }
);
Add as many additional different classes as you like to addEvent using the format: changeClass("default class name", "hover class name");

addEvent(window, "load",
  function() {
  changeClass("this", "thisHover");
  changeClass("that", "thatHover");
  changeClass("foo", "bar");
  }
);

In your html assign the default class to the desired element(s):

<div class="this">
<p class="that">
<li class="foo">

In your CSS declare the styles for each class. Then declare the style for the :hover state of that class for real browser in case javascript isn't available. Along with the :hover state, include the class name you specified for hover in the javascript for alleged browsers by M$.

.this {
 color: #000;
 background: #cc9;
}
.this:hover, .thisHover {
 color: #990;
 background: #ffc;
}
.that {
 color: #ff0;
 background: #000;
}
.that:hover, .thatHover {
 color: #fff;
 background: #933;
 }
.foo {
 color: #090;
 background: #9cc;
}
.foo:hover, .bar {
 color: #cfc;
 background: #ccc;
}

http://cmsproducer.com/IE6-bug-DOM-scripting-mouseover-web-standards-hover

http://www.xs4all.nl/~peterned/csshover.html

http://www.xs4all.nl/~peterned/csshover.html
This thing worked at last. And what's important - it makes work everything. Great job, Peter Nederlof!

2008, 2009.

Web Development - XHTML CSS JavaScript jQuery.

www.tuljo.com