Using mouseover in CSS

Question

All,

var a='<div id="details"  onmouseover="tip(this)">';

function tip(el)
{
    $(this).mouseover(function() {
    var b="<div id='test'>"+el.innerHTML+"</div>";
    $(b).css("display", "inline");
    });
}

Is anything wrong with the above code? I am trying to display el.innerhtml on mouserover next to the hyperlink

Answer 1

You need to append the code to your page DOM so it could be displayed. Currently you create a div, set CSS for it but it's still only in memory.

Answer 2

You are using $(this) inside your function, maybe it should be $(el)? And you need to do something like $('body').append(b); as well to add the <div> to the DOM.

Answer 3

Why not try this instead :

 function tip(el) {
     $(this).mouseover(function() {
     $("#test").html(el.innerHTML);
     $("#test").css("display","inline");
     }); }

Answer 4

Try to expand on what you want. Give us a list of requirements spell out exactly what you want. I expect a couple of the down votes will be rescided if you do this.

For my part, try this:

<div id="details">


<script type="text/javascript">
    $(document).ready(function(){
        $("#details").mouseover(function(){
            var $this = $(this);
            $this.append("<div id='test'>"+$this.html()+"</div>");
        });
    })
</script>

To show/hide would have been simple call to .show() or .hide()

If you really wanted this code:

var a='<div id="details"  onmouseover="tip(this)">'; 

Then you would have to append to the DOM:

$(document).append('<div id="details">');

And then bind your event:

$("#details").mouseover(function(){