Create DIV with onMouseOver effect with JS

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?

Answers


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 jQuery .hover():

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

I suggest to use .attr() jquery:

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

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
}

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

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

Need Your Help

Magento, precomplete custom options while creating/editing a product in admin

magento admin product options catalog

I’m trying to precomplete custom options during the process of creating or editing a product in the Magento admin : after product type choice.

Fuslogvw.exe tool for .Net does not show UI

.net fuslogvw

I'm trying to use fuslogvw.exe on a Win 2008 R2 system. It shows the process started and using CPU but no UI appears. I've tried the 32bit and 64bit version in and not in admin mode but no luck. I

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.