0

我正在尝试将 onmouseover 和 onmouseout 效果放在 span 标签上，但我遇到的问题是，当 span 标签中的数据进入第二行时，当用户点击行中的空白时，onmouseover 效果基本上会取消休息。

<span onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">
    <a href="#">this is a placeholder link to show the way that the span onmouseover acts when a <br/><br/>link enters a second/third line, essentially causing white-space within span</a>
</span>

http://jsfiddle.net/jGgaz/

这个小提琴显示了一个非常简单的跨度标签，其中嵌入了一个链接到第二行。我放了两个
标签来强调空白，但没有标签它的作用相同，只是换行符更细。我的问题是，我希望鼠标悬停影响在跨度标签内的任何地方悬停在其中的文本、换行符的空白或链接文本末尾右侧的空白上时基本上消失。

在我的实际使用中，悬停菜单显示在 span 标签的左下角，这意味着用户可能会悬停在右上角，当试图将鼠标光标移至菜单时，点击空白会导致菜单消失。此菜单是动态构建的，并添加到显示的任何帐户链接中。

    With _ActionLinkLabel
        .ID = "alp"
        .CssClass = "alWrap"
        If actionMenuItemString = String.Empty Then
            .Attributes.Add("onmouseover", "overActionLink('" + _ActionMenu.ClientID + "',this.id);")
        Else
            .Attributes.Add("onmouseover", "var arAMI = [" + actionMenuItemString + "];overActionLink('" + _ActionMenu.ClientID + "',this.id, arAMI);")
        End If
        .Attributes.Add("onmouseout", "outActionLink('" + _ActionMenu.ClientID + "');")
        .Attributes.Add("style", "height:100%;")
    End With

_ActionLinkImage = New ImageButton
        With _ActionLinkImage
            .ID = "ali"
            .ImageUrl = "/applications/images/icons/action_arrow.gif"
        End With

    _ActionLinkButton = New LinkButton
                With _ActionLinkButton
                    .Text = Me.Text
                    .ID = "alb"
                    .CssClass = "ActionLink"
                    .Style("postion") = "absolute"
                End With
            AddHandler _ActionLinkButton.Click, AddressOf OnActionLinkClicked
            _ActionLinkLabel.Controls.Add(_ActionLinkButton)
4

1 回答 1

1

将a标签设置display: inline-block;为此处所示http://jsfiddle.net/3n1gm4/7qLMJ/

就像在 word 或任何其他文本处理器中一样，a<br />只是一个字符，而不是整个行宽。

于 2013-10-28T14:43:55.847 回答