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

0

Я пытаюсь использовать 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 витает над тем, является ли это текст внутри, пробел строки прерывается или пробел справа от конца текста ссылки.

В моем реальном использовании этого меню hover отображается в левом нижнем углу тега 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)
Теги:
onmouseover

1 ответ

1
Лучший ответ

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

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

  • 0
    это работает очень хорошо, единственная проблема, которую я имею, состоит в том, что встроенный блок сталкивается с изображением, которое я рендерил рядом со ссылкой. Это изображение со стрелкой вниз, которое также отображает меню. Я отредактировал пост, чтобы также содержать это изображение.
  • 0
    Это изображение в теге A? Я не .net парень, так что извините, если это говорит само за себя из вашего кода. Если это правильно, я обновил свою скрипку, так что посмотрите.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню