onmouseover влияет на отмену разрывов строк в теге span

я пытаюсь применить эффекты 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 со встроенной ссылкой, которая попадает на вторую строку. Я вставил два тега
, чтобы подчеркнуть пробелы, но без тегов он действует так же, только имеет гораздо более тонкий разрыв строки. Моя проблема заключается в том, что я хочу, чтобы эффект 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)

person Nick G    schedule 28.10.2013    source источник


Ответы (1)


Установите для тега a значение display: inline-block;, как показано здесь http://jsfiddle.net/3n1gm4/7qLMJ/.

Как и в Word или любом другом текстовом процессоре, <br /> — это всего лишь один символ, а не целая строка.

person b.kelley    schedule 28.10.2013
comment
это работает очень хорошо, единственная проблема, с которой я сталкиваюсь, заключается в том, что встроенный блок сталкивает изображение, которое у меня отображается рядом со ссылкой. Это изображение со стрелкой вниз, которое также отображает меню. Я отредактировал сообщение, чтобы оно также содержало это изображение. - person Nick G; 28.10.2013
comment
Изображение находится в теге A? Я не парень из .net, так что извините, если это не требует пояснений из вашего кода. Если это правильно, я обновил свою скрипку, так что взгляните. - person b.kelley; 28.10.2013
comment
извините, я должен был быть более описательным, на самом деле он настроен как ‹span›‹a›ссылка для отображения меню‹/a›‹img для отображения меню/›‹/span› Если я установил диапазон для встроенного блока, он отображает меню правильно, но когда нажимается тег ‹a› и происходит подчеркивание, оно исчезает и возвращается, я надеюсь, что смогу понять, как содержать ‹img› в блочном отображении тега привязки, чтобы они в основном действовали как один и тот же элемент. - person Nick G; 28.10.2013
comment
В итоге я сделал то, что вы сказали, добавив встроенный блок к тегу привязки и просто задал ему заданную ширину, которая позволила бы контейнеру img оставаться выровненным по одной и той же строке в пределах диапазона, и в итоге получилось отлично! Большое спасибо! - person Nick G; 28.10.2013