열 개수를 사용할 때 호버에 텍스트 표시

글꼴을 사용하여 일부 다이어그램을 만듭니다. 다이어그램 위에 마우스를 올려 놓으면 다이어그램 아래에 텍스트가 표시됩니다. 이것은 예상대로 작동합니다. 이제 두 개의 열로 표시된 여러 다이어그램으로 페이지를 만들고 싶습니다. 스타일 시트에서 column-count: 2;을 통해이 작업을 수행합니다. 그러나 이제 모든 다이어그램에서 호버링이 작동하지 않습니다. 예를 들어 4 개의 다이어그램을 만들어 각각의 다이어그램에 대해 호버링이 작동하지만 칼럼 개수를 2로 설정하면 호버링이 두 개의 왼쪽 다이어그램에서만 작동합니다.열 개수를 사용할 때 호버에 텍스트 표시

CSS 코드 :

는

@font-face { 
font-family: diagramfont; 
src: url("diagramfont.ttf"); 
} 

body { 
column-count: 2; /* Removing this instruction and hovering works on all diagrams */ 
} 

.wrapper { 
position: relative; 
padding-bottom: 30px; 
} 

.diagram { 
font-family: diagramfont; 
font-size: x-large; 
} 

.overlay { 
display: none; 
position: absolute; 
left: 0; 
bottom: 0; 
text-align: center; 
} 

.wrapper:hover .overlay { 
display: block; 
}

XHTML :

<body> 
<div class="wrapper"> 
    <div class="diagram"> 
    Text for diagram 
    </div> 
    <span class="overlay"> 
     Text to overlay 
    </span> 
</div> 
<!-- Sequence of diagrams like recent structure --!> 
</body>

출처

2012-10-18 Saneb Viranda

</body> 닫는 태그는 주석. 제안에 대한

<!-- Sequence of diagrams like recent structure --> 
</body>

를 추가해보십시오 column-count: 2;.wrapper에

출처

2012-10-18 10:05:42 Dipak

감사합니다 -로 작성합니다. .wrapper에 열 수를 추가하는 긍정적 인 효과가 없습니다. –

@SanebViranda http://jsfiddle.net/에서 게시물을 작성하십시오. – Dipak

열 개수를 사용할 때 호버에 텍스트 표시

답변

관련 문제