I'm stuck with show/hide objects with mouseover JS

Hi everyone,

I'm trying to show/hide some more than one text box with link with different objects with mouseover/out event.

When I do it with only one object I can get it to work with this:

document.getElementById("myTriggerSustain").addEventListener("mouseover", FunctionMouseOver);

function FunctionMouseMover() {

cp.show("TextSustain");

}

document.getElementById("myTriggerSustain").addEventListener("mouseout", FunctionMouseOut);

function FunctionMouseOut() {

cp.hide("TextSustain");

}

But when I try the code below with more than one object, I can't figure out why nothing happens:

window.addEventListener("mouseover", function(e) {

if(e.target.id == "MyTriggershapeSustain") {
document.getElementById("TextSustainc").cp.show(this.id);

};

if(e.target.id == "MyTriggershapePackaging") {
document.getElementById("TextPackagingc").cp.show(this.id);

};

if(e.target.id == "MyTriggershapeCSR") {
document.getElementById("TextCSRc").cp.show(this.id);

};

window.addEventListener("mouseout", function(e) {

if(e.target.id == "MyTriggershapeSustain") {
document.getElementById("TextSustainc").cp.hide(this.id);

};

if(e.target.id == "MyTriggershapePackaging") {
document.getElementById("TextPackagingc").cp.hide(this.id);

};

if(e.target.id == "MyTriggershapeCSR") {
document.getElementById("TextCSRc").cp.hide(this.id);

};

Regards

Jacob