title: Change text within a tag on mouseover
body: <p>I have defined a tag in which on mouseover i am changing the text within the a tag</p>
  
  <pre><code>&lt;a class="bid-addwatchlist add-logout" href="/users/login" onmouseover="changeText(this)" onmouseout="sameText(this)"&gt;&lt;span style="font-size: 32px; line-height: 18px;"&gt;+&lt;/span&gt;&lt;span style="font-size: 14px; float: left;"&gt;Add to watchlists&lt;/span&gt;&lt;/a&gt;
  
  &lt;script&gt;
      function changeText(theTag){
          theTag.innerHTML = '&lt;span style="font-size: 1.7em; text-align:center; line-height:50px;"&gt;Login&lt;/span&gt;';
      }
  
      function sameText(theText){
          theText.innerHTML = '&lt;span style="font-size: 32px; line-height: 18px;"&gt;+&lt;/span&gt;&lt;span style="font-size: 14px; float: left;"&gt;Add to watchlists&lt;/span&gt;';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have given the following css for this a tag to make it look like a box</p>
  
  <pre><code>.bid-addwatchlist{
      background-color : #32679B;
      border-radius : 5px 5px 5px 5px;
      color : #FFFFFF;
      cursor : pointer;
      float : left;
      height : 56px;
      line-height : 14px;
      padding-top : 4px;
      text-decoration : none;
      width : 76px;
      margin-left : 11px;
  }
  </code></pre>
  
  <p>It is working fine but the problem i am facing is when i do mouseover the text changes to login and if i click on the login text nothing is happening whereas if i click on other side areas it is working. I am not understanding the problem why this is happening and what i need to do now so that if i click on the login text it works. Please suggest what i need to do or this is because the login text is not within the a tag. All i need to do is i want to change the text within the a tag onmouseover and consequently it should work.</p>
  
  <p>I have also tried this, defined the click event in the span for the text, but not working</p>
  
  <pre><code>function changeText(theTag){
          theTag.innerHTML = '&lt;span style="font-size: 1.7em; text-align:center; line-height:50px;" onclick=\'window.location="/users/login"\'&gt;Login&lt;/span&gt;';
      }
  </code></pre>
  
  <p><strong>Note:</strong> The text is just a normal link</p>