так?
<!DOCTYPE HTML>
<html>
<head>
<style>
.show{
-webkit-transition: all 1s ease;
color:red;
opacity:1;
}
.hide{
-webkit-transition: all 1s ease;
opacity:.5;
}
</style>
</head>
<body>
<div id="hover">hover is on me</div>
<a href="#" id="hide" class="hide">hover me</a>
<script>
function hover (opt) {
opt.elem.onmouseover = ElemMouseAction;
opt.elem.onmouseout = ElemMouseAction;
function ElemMouseAction (evt) {
var related, Call;
var e = evt || event;
if(e.type == 'mouseover'){
Call = opt.over;
related = e.relatedTarget || e.fromElement;
} else {
Call = opt.out;
related = e.relatedTarget || e.toElement;
}
while (related && related != this) {
related = related.parentNode;
}
if(related == this) return;
Call.call(this, e);
}
}
var lnk = document.getElementById("hide");
hover({
elem:document.getElementById('hover'),
over:function (e) {// срабатывает при mouseover
lnk.className = "show";
},
out:function (){// срабатывает при mouseout
lnk.className = "hide";
}
});
</script>
</body>
</html>