Create DIV with onMouseOver effect with JS

Question

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?

score 11 · Accepted Answer · answered Jun 30 '14 at 09:20

11

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 );

answered Jun 30 '14 at 09:20

christian314159

639
3
6

1

shame on me for not finding out by myself^^ thanks for the quick answer – user2078872 Jun 30 '14 at 09:23

score 4 · Answer 2 · answered Jun 30 '14 at 09:19

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
}

score 2 · Answer 3 · answered Jun 30 '14 at 09:09

2

Use jQuery .hover():

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

answered Jun 30 '14 at 09:09

martynas

12,120
3
55
60

score 2 · Answer 4 · answered Jun 30 '14 at 09:33

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;
}

score 1 · Answer 5 · answered Jun 30 '14 at 09:11

1

I suggest to use .attr() jquery:

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

answered Jun 30 '14 at 09:11

Alex Char

32,879
9
49
70

Claudio Silva · Answer 6 · 2015-07-04T13:43:42.243

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");
}

score 1 · Answer 7 · answered Jul 31 '20 at 21:50

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);

Create DIV with onMouseOver effect with JS

7 Answers7