Я пытаюсь использовать 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>
Эта скрипка показывает очень простой тег 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)
Установите a
тег для display: inline-block;
как видно здесь http://jsfiddle.net/3n1gm4/7qLMJ/
Так же, как в слове или любом другом текстовом процессоре, <br/>
- это всего лишь один символ, а не целая ширина строки.