CODEWITHSUNDEEP
javascriptjqueryonmouseoveronmouseout
kafka
kafka

Reputation: 949

Entry written with onmouseover

I want to insert a written Text inside a block at onmouseover.

My HTML source code is :

    <li id="v4">
      <div class="cl">
        <div>
          <span class="m">Text</span>
      <span class="count"></span>
      <span class="pr">
         <span class="p">0%</span>
      </span>
          <!-- insert written : <span class="c1">Vote</span> -->
        </div>
      </div>
    </li>

To insert the text in place of the comment, I wrote this Javascript code :

                    document.getElementById("v4").onmouseover = addSpan;            
        document.getElementById("v4").onmouseout =removeSpan;

        function addSpan(id)
        {           

            var li=document.getElementById(this.getAttribute("id"));            
            var divcell=li.firstChild;  

            var divelem=divcell.firstChild; 
            var span=document.createElement("span");
            span.setAttribute("class","c1");

            var testo=document.createTextNode("Vote");
            span.appendChild(testo);

            divelem.appendChild(span);                              
            span.style.display = 'block';

        }           
        function removeSpan(id)
        {               

            var li=document.getElementById(this.getAttribute("id"));            
            var divcell=li.firstChild;  

            var divelem=divcell.firstChild;//div            
            var span = divelem.lastChild;
            span.style.display='none';              
            divelem.removeChild(divelem.lastChild);     


        }

The problem is that the written link. How can solve this problem? Is my code correct?

[Edit]: i added css for you to see what happens fiddle. I used the code jquery of @Konstantin D-Infragistics but there is the same problem that is: when the mouse passes over the written "Text to add" it blink. I hope that the question is now clearer

Upvotes: 0

Views: 303

Answers (2)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

Consider making your life easier by using jQuery. If you add jQuery then you can achieve the functionality you would like the following way:

$('#v4').bind({
   'mouseover': function (event) {
       $('<span class="c4">Text to add</span>').appendTo($(this).find('div div'));
   },
   'mouseout': function (event) {
       $('.c4').remove();
   },
});

Here it is in fiddle.

Upvotes: 0

Viral Shah
Viral Shah

Reputation: 2246

Possible solution of your problem is here...Hope this could help you.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hide {
    display:none;
 }
.show {
    display:block;
 }   
</style>

<script type="text/javascript">
   var el;
window.onload=function() {
   el=document.getElementById('status');
   el.onmouseover=function() {
   changeText('hide','show')
 }
   el.onmouseout=function() {
   changeText('show','hide');
  }
 }
function changeText(cl1,cl2) {
   document.getElementById('span1').className=cl1;
   document.getElementById('span2').className=cl2;
}
</script>

</head>
<body>

<p id="status">
<span id="span1">[Closed]</span>
<span id="span2" class="hide"><a id="link" href="index.php">Open</a></span>
</p>

</body>
</html>

Upvotes: 1

Related Questions