css - Animating tooltip fade in and out -


how can make tooltip show , hide fade? have tried add:

transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; 

but no luck, here code

tooltip css:

.mainbuttoncontainer button:hover:after {      background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);     border-color: #093466;     border-radius: 5px 5px 5px 5px;     border-style: solid;     border-width: 7px 2px 2px;     bottom: -5px;     color: #093466;     padding: 5px 15px;     position: absolute;     width: 113px;     z-index: -1; } 

html:

<button  id=mgf_main1 type="button" onclick="loaddata(1)">     <img src="images/magof-icon.png" width="68" height="68"/> </button> 

jsfiddle.net/rdrhs

you need move describes element button:after, , change properties change on hover in button:hover:after.

fiddle

button:after {     opacity: 0;      -webkit-transition: opacity .25s ease-in-out;        -moz-transition: opacity .25s ease-in-out;             transition: opacity .25s ease-in-out;      content:'';     background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);     border-color: #093466;     border-radius: 5px 5px 5px 5px;     border-style: solid;     border-width: 7px 2px 2px;     bottom: -5px;     color: #093466;     padding: 5px 15px;     position: absolute;     top:50px;     left:70px;     width: 113px;     height: 30px;     z-index: -1; }  button:hover:after {     opacity: 1;     } 

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -