숨겨진 사업부는에 : 마우스를 가져 내 <strong>HTML</strong> 페이지에서

Question

나는 사업부 다음 한 CSS/CSS3에로 마우스를 한 후 5 초 동안 볼 수있을 DIV합니다

<div class="tooltip"> 
    <span>content</span> 
</div> 

그리고 다음 CSS 스크립트

마우스 사업부에서

.tooltip span { 
    display:none; 
} 
.tooltip:hover span { 
    display:inline; 
} 

스팬보다 5 초 동안 볼 수 머물 수 있도록하는 방법이 있나요 후? 내가 이것을하려고하는 이유는이 툴팁에 링크와 같은 내용이 들어 있기 때문입니다.

Answer 1

죄송합니다 PURE CSS, 나는 잊어 버렸습니다. Display은 전환에 의해 영향을받지 않습니다.

대신 opacity을 사용하십시오.

사용 전환 : 당신이 페이드 아웃하려면

.tooltip span { 
    opacity: 0; 
    transition: opacity 0s 1s; 
} 
.tooltip:hover span { 
    opacity: 1; 
    transition: opacity 0s; 
} 

.tooltip span { 
 
    opacity: 0; 
 
    transition: opacity 0s 5s; 
 
} 
 

 
.tooltip:hover span { 
 
    opacity: 1; 
 
    transition: opacity 0s; 
 
}

<div class="tooltip"> 
 
    <span>content</span> 
 
</div>

, 이것을 사용 :

.tooltip span { 
    opacity: 0; 
    transition: opacity 0s 5s; 
} 
.tooltip:hover span { 
    opacity: 1; 
    transition: opacity 0s; 
} 

.tooltip span { 
 
    opacity: 0; 
 
    border: 1px solid transparent; 
 
    transition: all .4s 4.6s; 
 
} 
 

 
.tooltip:hover span { 
 
    opacity: 1; 
 
    border: 1px solid #000; 
 
    opacity: 1; 
 
    transition: all .4s; 
 
}

<div class="tooltip"> 
 
    <span>content</span> 
 
</div>

,129,

업데이트 여러 속성이있는 경우 all을 사용하십시오. 참고 : 일반적으로 초기 속성과 변경된 속성이 있어야합니다. 예 : JSFiddle (작업)

Answer 2

의 jQuery 솔루션을 참조하십시오 : 여기 내 시도가

$(".tooltip").mouseover(function() { 
 
    $('.tooltip span').show(); 
 
    setTimeout(function(){ 
 
    $('.tooltip span').hide('slow', function(){ 
 
\t });// or fade, css display however you'd like. 
 
}, 5000); // set visible time 
 
});

.tooltip span { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="tooltip"> 
 
    tooltip 
 
    <span>content</span> 
 
</div>

Answer 3

입니다!

HTML

<div class="tooltip"> 
    Title 
    <span> - content</span> 
</div> 

CSS

.tooltip span { 
    visibility: hidden; 
} 

.tooltip:hover span { 
    visibility: visible; 
} 

.tooltip span:not(:hover) { 
    visiblity: hidden; 
    transition: visibility 5s; 
} 

JSFiddle : https://jsfiddle.net/mpx3m1v4/

Answer 4

순수 CSS. 이것은 완벽하지 않습니다. 이 시도.

.tooltip span { 
    //display:none; 
    display: block; 
} 
.tooltip:hover span { 
    //display:inline; 
    -webkit-animation: opacity1 0.1s 1 forwards; 
    animation: opacity1 0.1s 1 forwards; 
} 

.tooltip:not(:hover) span{ 
    -webkit-animation: opacity0 0.1s 1 forwards; 
    animation: opacity0 0.1s 1 forwards; 
    -webkit-animation-delay: 5s; 
    animation-delay: 5s; 
} 

@-webkit-keyframes opacity1 { 
    to {opacity: 1; height: auto; width: auto;} 
} 
@keyframes opacity1 { 
    to {opacity: 1; height: auto; width: auto;} 
} 

@-webkit-keyframes opacity0 { 
    to {opacity: 0; height: 0; width: 0;} 
} 
@keyframes opacity0 { 
    to {opacity: 0; height: 0; width: 0;} 
}