0

span タグに onmouseover と onmouseout の効果を入れようとしていますが、問題は、span タグ内のデータが 2 行目に入ると、ユーザーが行の空白を押すと 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/

このフィドルは、2 行目にリンクが埋め込まれた非常に単純な span タグを示しています。空白を強調するために 2 つの
タグを挿入しましたが、タグがなくても同じように機能し、改行がはるかに細くなっています。私の問題は、スパンタグ内のテキスト、改行の空白、またはリンクテキストの末尾の右側の空白など、スパンタグ内の任意の場所にカーソルを合わせるたびに、onmouseover の効果が本質的にオフになるようにすることです。

これを実際に使用すると、スパンタグの左下隅にホバーメニューが表示されます。つまり、ユーザーが右上隅にホバーし、マウスカーソルをメニューに移動しようとすると、空白にヒットする可能性があります。消えるメニュー。このメニューはオンザフライで動的に作成され、表示されるアカウント リンクに追加されます。

    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タグを設定しますhttp://jsfiddle.net/3n1gm4/7qLMJ/display: inline-block;

単語やその他のテキスト プロセッサと同様に、a<br />は 1 文字であり、行全体の幅ではありません。

于 2013-10-28T14:43:55.847 に答える