鼠标悬停会影响 span 标记中换行符的取消

onmouseover affects cancel on line breaks in span tag

本文关键字：换行符 取消 悬停 影响 span 鼠标      更新时间：2023-09-26

我正在尝试在 span 标签上放置 onmouseover 和 onmouseout 效果，但我遇到的问题是，当 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 标签，其中嵌入了一个点击第二行的链接。 我放入了两个
标签来强调空格，但没有标签，它的作用是一样的，只是换行符要细得多。 我的问题是，我希望每当将 span 标签中的任何位置悬停在 span 标签上的任何时候，无论是其中的文本、换行符的空格还是链接文本末尾右侧的空格，鼠标悬停效果基本上都会消失。

在我实际使用它时，悬停菜单显示在 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)

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

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

相关文章：