I would like to create a DIV element via Javascript, but it should have a onMouseOver effect.

so I know what the tags look like in HTML:

<div onMouseOver="doSth()" onMouseOut="doSthElse()"> </div>

and I know how to create my DIV:

var myDiv= document.createElement("div");
//style settings
document.body.appendChild(myDiv);

but how do I create the effect in Javascript code?

I would like to create a DIV element via Javascript, but it should have a onMouseOver effect.

so I know what the tags look like in HTML:

<div onMouseOver="doSth()" onMouseOut="doSthElse()"> </div>

and I know how to create my DIV:

var myDiv= document.createElement("div");
//style settings
document.body.appendChild(myDiv);

but how do I create the effect in Javascript code?

• javascript
• jquery
• html
• css
• onmouseover

7 Answers 7

Without jQuery, this is what you want:

var myDiv = document.createElement('div');

myDiv.onmouseout  = doSth;
myDiv.onmouseover = doSthElse;
// with doSth & doSthElse being functions you defined somewhere else already
// otherwise you can assign a function here:
// myDiv.onmouseout = function(){};

document.body.appendChild( myDiv );

Use pure Javascript EventTarget.addEventListener

var myDiv= document.createElement("div");
myDiv.addEventListener("mouseover", mouseOver, false);
myDiv.addEventListener("mouseout", mouseOut, false);
document.body.appendChild(myDiv);
function mouseOver()
{  
   //do something
}

function mouseOut()
{  
   //do something
}

Use jQuery .hover():

$('#myDiv').hover(doSth, doSthElse);

If you just want to display some other element or change the style of the div, you can also use a CSS class:

var div = document.createElement('div');
div.className = "hoverEffect";

Then you can style the the div using the CSS :hover selector. For example:

div.hoverEffect:hover {
    color:#fff;
}

div.hoverEffect child {
    display:none;
}

div.hoverEffect:hover child {
    display:block;
}

I suggest to use .attr() jquery:

$(myDiv).attr("onMouseOver","doSth()");
$(myDiv).attr("onMouseOut","doSthElse()");

You can pass all calls function on attributes looks like this:

$('#idColor').attr("onMouseOver","showStone('"+arr[i]+"')");

For example:

var arr = new Array();
arr.push("granite-alaskawhite.jpg");
arr.push("granite-bordeauxriver.jpg");
arr.push("granite-copenhagen.jpg");

for(var i = 0; i < arr.length; i++ ) {      
    var img = document.createElement('img');
    var idColor = 'color' + i;
    img.id = idColor;
    img.src = "assets/images/projects3d/colors/" + arr[i];
    img.className = 'proj-items';

    $("#colors").append(img);

    //Call functions
    $('#' + idColor).attr("onMouseOut","hideStone()");
    $('#' + idColor).attr("onMouseOver","showStone('"+arr[i]+"')");

}


function hideStone() {
    $("#p3ddesc").html( "" );
    $('#p3ddesc').attr("class","p3ddesc");
}

function showStone( stoneTxt ) {
    $("#p3ddesc").html( stoneTxt );
    $('#p3ddesc').attr("class","p3ddesc-active");
}

One option without using JQuery, is setAttribute(). Unlike some other options, it also allows you to set a parameter in your function call. For example, passing the parameter this in the case that your function needs to alter the calling element.

var myDiv= document.createElement("div");
myDiv.setAttribute("onmouseover", "myFunction(this)")
document.body.appendChild(myDiv);