मैं एक समाधान है, जो काम करता है मिल गया लेकिन नहीं सबसे अच्छा फैशन
button:after {
content:' ' attr(title);
visibility: hidden;
opacity:0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
font-size: 0;
}
button:hover:after {
content:' ' attr(title);
visibility: visible;
opacity:1;
transition-delay:0s;
font-size: 13px;
}
See working JSFiddle here
पृष्ठभूमि
आपका दृष्टिकोण प्रदर्शन संपत्ति का उपयोग करने के अनुरूप है हो सकता है। इसलिए क्रेडिट प्रारंभिक :after
राज्य में 0 पर font-size कम करने के लिए अपने छोटे से हैक के साथ इस Transitions on the display: property करने के लिए जाना
अद्यतन
यहां तक कि चिकनी संक्रमण:
button:after {
content: ' ' attr(title);
font-size: 0;
opacity: 0;
transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}
button:hover:after {
font-size: inherit;
opacity: 1;
transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}
देखें JSFiddle
'पर transition' की स्थापना': hover' व्यर्थ है – haim770
तुम भी बटन की चौड़ाई के लिए एक संक्रमण जोड़ना चाहिए, और यह बेहतर :-) –
सही दिखाई देगा, दोनों बेला और कोड अद्यतन – gco