Question

我试图在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标记，其中嵌入了一个链接到第二行的链接。我添加了两个标签以强调空白，但没有标签它的行为相同，只是有一个更薄的换行符。我的问题是，我希望onmouseover影响基本上在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)

Answer 1

将a标记设置为display: inline-block;，如http://jsfiddle.net/3n1gm4/7qLMJ/

所示

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

onmouseover影响span标记中的换行符取消

1 个答案: