Alternativas a ilegal ou dentro tags em um hover?

Question

Alguém tem uma sugestão para a criação de espaços de linha do tipo parágrafo dentro de um tag <li> que inclui uma pseudo-classe pop-up pairou?

Eu tenho um <span> que aparece em a:hover e eu quero o texto que aparece para ser dividido em 2 parágrafos. Ele funciona com <br> no FF, mas eu quero fazer a coisa certa (agora que eu descobri que é errado!) ...

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 ;
}

Answer 1

Seu problema pode surgir do fato de que você está usando uma tag incorretamente.

Spans supostamente são elementos inline e você está denominando-o como se fosse um elemento de bloco. É certo que você pode forçar um período para se comportar como um elemento de bloco, adicionando o estilo certo, mas isso nem sempre pode ser honrado pelos vários navegadores lá fora.

Idealmente, você deve estar usando um div vez. Você pode então usar tanto as tags p ou mais tags div para indicar os parágrafos (idealmente p, desde semanticamente que realmente são os parágrafos em vez de blocos independentes de texto).

Answer 2

Err não há nada de errado em ter <br> dentro <a> ou <span>. É perfeitamente válido de acordo com o HTML 4.01 especificação .

Edit:. <li> pode conter <p>, <br>, e praticamente qualquer outra coisa

A especificação é um pouco difícil de ler, mas basicamente diz:

• LI pode conter block ou inline
• block é feito de P + algumas outras coisas
• inline é feito de special + algumas outras coisas
• special é feito de A + BR + algumas outras coisas

Em relação <a> diz:

• A pode conter inline exceto A
• inline ... veja acima

Answer 3

Você poderia ficar mais um período lá como um "falso" p tag:

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

E no seu CSS:

#rightlist span span {display:block;margin:...}

Nota qualquer coisa que você declarar para #rightlist span será aplicada a #rightlist span span, então você pode precisar de substituir algumas das regras em #rightlist span span.

Answer 4

Por que é 'errado'?

sua tag br talvez deva ser codificado como:

 <br />

Answer 5

Por que a sua maneira errada atual?

Você pode tentar este

<span>
  <p>words words words that are "paragraph" 1 of List item</p>
  <p>different words that make up "paragraph" 2 of List item</p>
</span>