Help me with my hovering code

jacafio

03-05-2012, 01:58 PM

Hi , I have this code in whitch I wanned an element to exchange between 2 CSS3 classes, but it isn't working, can any one help me out?

Here it goes:

var addClass = function (valor, elemento) {
if (!elemento.className) {
elemento.className = "nothing";
} else if (elemento.className.indexOf(valor) !== -1) {
return;
} else {
elemento.className += " ";
elemento.className += valor;
elemento.getAttribute("class");
}
};
var linkHover = function () {
var links = document.getElementsByTagName("a"), aLen = links.length, i;
console.log(links);
console.log(aLen);
for (i = 0; i < aLen; i += 1) {
links[i].onmouseover = function () {
if (this.className.indexOf("rotateRight") === -1 && this.className.indexOf("rotateLeft") === -1) {
addClass("rotateRight", this);
}
};
links[i].onmouseout = function () {
if (this.className.indexOf("rotateRight") !== -1) {

this.className.replace(/rotateRight/gi, "rotateLeft");

} else if (this.className.indexOf("rotateLeft") !== -1) {
this.className.replace(/rotateLeft/gi, "rotateRight");
}
console.log(this.className);
};
}
};
window.onload = function () {
linkHover();
};

Thanks!

MarPlo

03-05-2012, 02:32 PM

Hi,
Try this code:
<style type="text/css"></style>
</head>
<body>

<a href="" class="abc">fjhj</a>

<div id="scrtop" onclick="scrollTo(0,0);"><span>&uArr;</span>TOP</div>
<script type="text/javascript"></script>

jacafio

03-05-2012, 06:03 PM

I've fixed it.
And by the way , avoid using in-line coding with javascript.

Here is the right code:

var addClass = function (valor, elemento) {
if (!elemento.className) {
elemento.className = "nothing";
} else if (elemento.className.indexOf(valor) !== -1) {
return;
} else {
elemento.className += " ";
elemento.className += valor;
elemento.getAttribute("class");
}
};
var linkHover = function () {
var links = document.getElementsByTagName("a"), aLen = links.length, i;
console.log(links);
console.log(aLen);
for (i = 0; i < aLen; i += 1) {
links[i].onmouseover = function () {
if (this.className.indexOf("rotateRight") === -1 && this.className.indexOf("rotateLeft") === -1) {
var newClass = addClass("rotateRight", this);
console.log("1: " + newClass);
}
};
links[i].onmouseout = function () {
if (this.className.indexOf("rotateRight") !== -1) {
newClass = this.className.replace(/rotateRight/gi, "rotateLeft");
console.log("2: " + newClass);
} else if (this.className.indexOf("rotateLeft") !== -1) {
newClass = this.className.replace(/rotateLeft/gi, "rotateRight");
console.log("3: " + newClass);
}
this.className = newClass;
console.log(this.className);
};
}
};
window.onload = function () {
linkHover();
};

Edit: the consle.log statements are just for debugging.