Change text within a tag on mouseover
<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>
