Weblabor

Hali! Nemrég olvastam olvastam hogy hogyan lehet CSS hover effektet emulálni IE-ben. Gondoltam kipróbálom. Én CSS szerkesztéshez a TopStyle 3 pro-t használom. Átállítom a CSS szintet IE6-ra és működik is. Sőt, ha a Browsers listában kiválasztom az Internet Explorer-t akkor is megy.

Viszont ha már az oldalt nézem, amelyikhez a css fájl van 'csatolva' ott már nem jó. Egyébként minden más működik.

A CSS fájl tartalma:

input
{
border: none;
background-color: #F1963F;
height: 16px;
width: 101px;
font-size: 10px;
font-family: Arial;
color: White;
padding: 1px;
}

input.hover
{
background-color: #CD853F;
}

input
{
behavior: url(hover.htc );
}

Tehát egy input mezőt szeretnék a hoverrel kicsit jobbá tenni.

A hover.htc tartalma:


<attach event="onmouseover" handler="hoverRollOver" />
<attach event="onmouseout" handler="hoverRollOff" />
<script type="text/javascript">
//
// Simple behaviour for IE5+ to emulate :hover CSS pseudo-class.
// Experimental ver 0.1
//
// This is an experimental version! Handle with care!
// Manual at: http://www.hszk.bme.hu/~hj130/css/list_menu/hover/
//

function hoverRollOver() {
element.origClassName = element.className; // backup origonal className
var tempClassStr = element.className;
tempClassStr += "Hover"; // convert name+'Hover' the last class name to emulate tag.class:hover
tempClassStr = tempClassStr.replace(/\s/g,"Hover "); //convert name+'Hover' the others to emulate tag.class:hover
tempClassStr += " hover"; // add simple 'hover' class name to emulate tag:hover
element.className = element.className + " " + tempClassStr;
//window.status = element.className; // only for TEST
}
function hoverRollOff() {
element.className = element.origClassName;
}

</script>

Ha vkinek működik ez a megoldás az szóljon.

Kösz!!