Question

i am trying to put onmouseover and onmouseout effects on a span tag, but the issue that i'm having is that when the data within the span tag enters a second row the onmouseover effect essentially cancels when the user hits the white space in the line break.

<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/

This fiddle shows a very simple span tag with a link embedded that hits a second line. I put in two
tags to emphasize the whitespace, but without the tags it acts the same, just has a much thinner line break. My issue is that I want the onmouseover affect to essentially go off whenever anywhere within the span tags is hovered over whether it be the text within, the whitespace of the line breaks or the whitespace to the right of the end of the link text.

In my real utilization of this a hover menu is displayed attached to the bottom left corner of the span tag, meaning that a user might hover in the top right corner and when trying to get their mouse cursor to the menu, hit white space causing the menu to disappear. This menu is being built on the fly dynamically and added to ever account link being shown.

    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)
Was it helpful?

Solution

Set the a tag to display: inline-block; as seen here http://jsfiddle.net/3n1gm4/7qLMJ/

Just like in word or any other text processor, a <br /> is just a single character, not an entire lines width.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top