HTML 약어 표 - mouseover에서의 의미 표시

-3

두 개의 열과 약 80 행의 HTML 표가 있습니다. 여기에는 두문자어와 그 의미가 들어 있습니다.HTML 약어 표 - mouseover에서의 의미 표시

테이블의 첫 번째 행을 표시하고 의미가 있습니다 (예 : 동일한 tr의 td와 함께 표시됨). 마우스 오버시 상자에 표시됩니까?

2017-09-05 Digital Lightcraft

..., 당신은 무엇을 무엇을 시도했다 당신이 당신의 연구에서 발견? – CBroe

아직 아무것도 아니지만, 방금 JS로 단일 항목을 사용하여 직선적으로 살펴 보았지만 전에는 전체 표로이 작업을 수행하지 않았습니다. –

최소한이 코드는 직접 작성해야합니다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –

이 질문은 이전에 제기되었지만 예. 할 수있어.

JSfiddle

CSS :

.meaning { 
    display:none; 
} 
.Acronym:hover + .meaning { 
    display:unset; 
}

HTML :

<table> 
<tbody> 
    <tr><td class="Acronym">Foo</td><td class="meaning">bar</td></tr> 
    <tr><td class="Acronym">Foo2</td><td class="meaning">bar2</td></tr> 
</tbody> 
</table>

출처

2017-09-05 13:26:00 Tijmen

멋지고 단순 해 보입니다. - 고마워요! –

'의미'가 '약어'다음에 오는 경우에만 작동한다는 점에 유의하십시오. 즉, 다음과 같은 형제 자매 만 선택할 수 있습니다. 이전 형제에게는 의미가있는 경우 작동하지 않습니다. – Tijmen

이것은 :hover 선택기를 사용하는 경우에만 CSS 가능합니다.

다음은 툴팁이있는 셀의 예입니다. 각 .cell은 테이블에 <td> 일 수 있습니다.

Codepen

HTML

<span class="cell"> 
    acr. 
    <div class="tooltip">Acronym</div> 
</span>

CSS

아마

.cell { 
    border: 1px solid black; 
    padding: 5px 10px; 
} 

.cell .tooltip { 
    position: absolute; 
    opacity: 0; 
    transition: opacity 250ms; 
    border: 1px solid grey; 
    background-color: white; 
    padding: 2px; 
} 

.cell:hover .tooltip { 
    display: block; 
    opacity: 1; 
}

출처

2017-09-05 13:34:34

이것은 OP의 질문에 대답하지 않습니다. 왜냐하면 OP의 의미가 인접한'td '에있는 반면, 약어는'td' 안에 * 의미가 있어야하기 때문입니다. – Tijmen

사실 내 정확한 질문을 해결하지는 못하지만 찾기 및 바꾸기가 조금 더 어려워 의미 td를 표시하거나 숨기는 것보다 더 나은 UI/UX를 허용합니다. –

충분합니다. 행운을 비네, 당신이 선택한 대답을 수락하는 것을 잊지 마십시오. – Tijmen

HTML 약어 표 - mouseover에서의 의미 표시

답변

관련 문제