호버의 태그 내에서 불법 또는 에 대한 대안?

Question

누구든지 단락 유형 라인 공간을 만들기위한 제안이 있습니까? <li> 호버링 된 팝업 의사 클래스가 포함 된 태그?

나는있다 <span> 그것은 팝업됩니다 a:hover 그리고 나는 팝업이 2 개의 단락으로 나뉘어지기를 원합니다. 그것은 함께 작동합니다 <br> FF에서는 옳은 일을하고 싶다 (이제 내가 잘못 발견 했으므로!) ...

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

u003Cspan>태그를 잘못 사용하고 있다는 사실에서 문제가 발생할 수 있습니다.u003C/span>

스팬은 인라인 요소로 여겨지며 마치 블록 요소 인 것처럼 스타일링하고 있습니다. 틀림없이 당신은 올바른 스타일을 추가하여 스팬을 블록 요소로 작동하도록 강요 할 수 있지만, 이것은 항상 다양한 브라우저에서 영예를 얻지 못할 수 있습니다.

이상적으로는 DIV를 대신 사용해야합니다. 그런 다음 P 태그 또는 추가 DIV 태그를 사용하여 단락을 표시 할 수 있습니다 (Semantically는 실제로 관련없는 텍스트 블록이 아닌 단락이기 때문에 P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P).

Answer 2

오류가있는 것에는 아무런 문제가 없습니다 <br> 내부에 <a> 또는 <span>. 에 따라 완벽하게 유효합니다 HTML 4.01 사양.

편집하다: <li> 포함 할 수 있습니다 <p>, <br>, 그리고 거의 다른 것.

사양은 읽기가 약간 어렵지만 기본적으로 말합니다.

• LI 포함 할 수 있습니다 block 또는 inline
• block 만들어졌습니다 P + 다른 것들
• inline 만들어졌습니다 special + 다른 것들
• special 만들어졌습니다 A + BR + 다른 것들

에 관하여 <a> 그것은 말한다 :

• A 포함 할 수 있습니다 inline 제외하고 A
• inline... 위 참조

Answer 3

"가짜"P 태그로 다른 스팬을 붙일 수 있습니다.

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

그리고 당신의 CSS에서 :

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

메모 당신이 선언하는 모든 것 #rightlist span 적용됩니다 #rightlist span span, 따라서 일부 규칙을 무시해야 할 수도 있습니다. #rightlist span span.

Answer 4

왜 '틀린'입니까?

BR 태그는 아마도 다음과 같이 코딩해야합니다.

 <br />

Answer 5

현재의 길은 왜 잘못 되었습니까?

당신은 이것을 시도 할 수 있습니다

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