Question

我已经定义了一个标签，在鼠标悬停时我正在更改标签

中的文本

<a class="bid-addwatchlist add-logout" href="/users/login" onmouseover="changeText(this)" onmouseout="sameText(this)"><span style="font-size: 32px; line-height: 18px;">+</span><span style="font-size: 14px; float: left;">Add to watchlists</span></a>

<script>
    function changeText(theTag){
        theTag.innerHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;">Login</span>';
    }

    function sameText(theText){
        theText.innerHTML = '<span style="font-size: 32px; line-height: 18px;">+</span><span style="font-size: 14px; float: left;">Add to watchlists</span>';
    }
</script>

我为这个标签提供了以下css，使其看起来像一个盒子

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

它工作正常，但我面临的问题是当我鼠标悬停文本更改登录时，如果我点击登录文本没有发生任何事情，而如果我点击其他侧面区域它正在工作。我不明白为什么会发生这种情况以及我现在需要做什么，以便如果我点击登录文本就可以了。请建议我需要做什么，或者这是因为登录文本不在标签内。我需要做的就是我想更改标签onmouseover中的文本，因此它应该可以工作。

我也试过这个，在文本的span中定义了click事件，但没有工作

function changeText(theTag){
        theTag.innerHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;" onclick=\'window.location="/users/login"\'>Login</span>';
    }

注意：该文字只是一个普通链接

Answer 1

我认为你的问题是你为 onMouseOver 输入的文本没有绑定到link元素，因为它不在解析DOM的时候。因此，我也会将链接添加到登录文本。

function changeText(theTag){
    theTag.innerHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;"><a href="/users/login">Login</a></span>';
}

Answer 2

你去，修理它;）

http://jsfiddle.net/WwM5g/2/

我没有使用onmouseover和onmouse，而是使用.hover jQuery事件。

在鼠标悬停时更改标记内的文本

2 个答案: