替代非法< br>或< p>在< li>内悬停标签？ [英] Alternatives to illegal <br> or <p> within <li> tags on a hover?

问题描述

有人建议在< li> 标签中创建包含悬停弹出伪类的段落类型行空格吗？

我在 a：hover < span> >我想要弹出的文本分成两段。它可以在FF中使用< br> ，但我想做正确的事情（现在我发现它是错的！）...

html：

 < div id =rightlist> 
< ul> 
< li>< a href =>清单项目
< span> 
词语单词是段落1列表项目
< br>< br> 
不同的单词构成了列表项目
< / span>< / a>< / li>的第2段。 
  

css：

  #rightlist {
 margin-top：10px; margin-right：5px;宽度：387px;身高：239px; 
背景颜色：＃7EBB11; 
 display：table-cell; 
 z-index：100; 
 float：right; 
} 
 
 #rightlist ul {
 text-align：left; 
保证金：0; 
 margin-top：6px; 
 font-family：sans-serif; 
 font-size：20px; 
颜色：黑色; 
} 
 
 #rightlist a 
 {
 display：table-cell; 
 text-decoration：none;颜色：黑色; 
背景：＃7EBB11; 
} 
 
 / *出现< a>项目（但在< span>标记之前）悬停* / 
 #rightlist a：悬停{
颜色：白色; 
} 
 
 / *在< a>< / a>当没有悬停时标记* / 
 / * %%%%%重要 - 保持位置：绝对在这个div %%%%% * / 
 #rightlist a span {
 display：none; 
位置：绝对; 
 margin-left：-412px; 
 top：-10px; left：10px;填充：10px; 
 z-index：100; 
 width：380px;身高：222px; 
颜色：白色;背景颜色：＃7EBB11; 
字体：0.75em Verdana，sans-serif; font-size：13px;颜色：黑色; 
 text-align：left; 
} 
 
 
 
 / *在< a>悬停时的标签* / 
 #rightlist a：hover span {
 display：table-cell; 
 
  

解决方案

事实上您正在使用< span>标记不正确。

跨度应该是内联元素，并且您将其设置为块元素。无可否认，您可以通过添加正确的样式来强制跨度表现为块元素，但这可能并不总是受到各种浏览器的支持。

理想情况下，您应该改用div来代替。然后，您可以使用p标签或其他div标签来指示段落（理想情况下，p，因为它们实际上是段落而不是不相关的文本块）。

Does anyone have a suggestion for creating paragraph-type line spaces within a <li> tag that includes a hovered pop-up pseudo-class?

I have a <span> that pops up on a:hover and I want the text that pops up to be broken into 2 paragraphs. It works with <br> in FF but I want to do the right thing (now that I've discovered it's wrong!)...

html:

<div id="rightlist">
  <ul>
      <li><a href="">List item
          <span>
             words words words that are "paragraph" 1 of List item
             <br><br>
             different words that make up "paragraph" 2 of List item
          </span></a></li>

css:

#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell; 
z-index: 100 ;
    float: right ;
}

#rightlist ul {
  text-align: left;
margin: 0;
   margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}

#rightlist a 
{
    display: table-cell;
text-decoration: none; color: black; 
background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}

/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px; 
color: white;  background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}



/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}

解决方案

Your problem may arise from the fact that you're using a <span> tag incorrectly.

Spans are supposed to be inline elements and you're styling it as though it were a block element. Admittedly you can force a span to behave as a block element by adding the right style, but this may not always be honoured by the various browsers out there.

Ideally you should be using a div instead. You can then use either p tags or further div tags to indicate the paragraphs (ideally p, since semantically they actually are paragraphs rather than unrelated blocks of text).

这篇关于替代非法&lt; br&gt;或&lt; p&gt;在&lt; li&gt;内悬停标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！