मेरे पास मेरे पृष्ठ के शीर्ष पर एक div है, जिसमें कुछ हेडर टेक्स्ट है, जो mouseenter पर, कुछ छोटे टेक्स्ट को प्रकट करने के लिए (ऊंचाई में) विस्तारित होना चाहिए। फिर, mouseleave पर, इसे वापस लेना चाहिए। यह जितना लगता है उससे कहीं ज्यादा कठिन है...
समाधान चाहिए:
- केवल हेडर फिट करने के लिए ऊंचाई से जाएं, सभी टेक्स्ट फिट करने के लिए ऊंचाई तक जाएं।
- एक से दूसरे में संक्रमण।
- शुद्ध सीएसएस का उपयोग करने का प्रयास करें।
- यदि माउस छोड़ता है, और वीज़ा वर्सा (सीएसएस में डिफ़ॉल्ट, लेकिन jQuery में नहीं) तो विस्तारित एनीमेशन रोकें।
मैं प्रयास कर चुका हूं:
- मेरी स्टाइलशीट में
:hoverका उपयोग, सेट पिक्सेल मान सेautoमें बदलने के लिए, जैसा कि यह प्रश्न (लेकिन मेरा यह शुद्ध सीएसएस है)। इससे संक्रमण नहीं हुआ। - विस्तार पर एक निर्धारित ऊंचाई का उपयोग करना, जो विभिन्न व्यूपोर्ट आकारों पर काम नहीं करता है।
max-heightका उपयोग करना, और इसे वास्तविक विस्तारितdivसे बड़े आकार में विस्तारित करना, जैसा कि यह प्रश्न। इसका मतलब है कि ट्रांज़िशन ठीक से काम नहीं करते हैं, और अलग-अलग डिवाइस पर अलग दिखते हैं।jQuery.animate()का उपयोग करके, ऑटो के पिक्सेल मान का उपयोग करके, फिर एक ट्रांज़िशन बनाने के लिए, जैसा कि यह प्रश्न, लेकिन एनीमेशन को अगले एक को शुरू करने से पहले समाप्त करना होगा, जिसका अर्थ है कि एनिमेशन की एक श्रृंखला उपयोगकर्ता के माउस के बादdivसे बहुत दूर होने पर लंबे समय तक जारी रह सकती है।
उपरोक्त सभी चार उदाहरण यहां देखें।
जैसा कि कहा गया है, शुद्ध सीएसएस आदर्श होगा, लेकिन यदि संभव नहीं है, तो मैं जावास्क्रिप्ट के साथ ठीक रहूंगा (और मैं jQuery पसंद करता हूं)।
धन्यवाद! :)
8
Luke
14 फरवरी 2016, 00:09
1 उत्तर
css :hover का उपयोग करके देखें
[id^="title"] {
height: 1em;
overflow: hidden;
-webkit-transition: height 1s;
/* Transitions not working */
transition: height 1s;
}
[id^=title]:hover {
height: 10em;
}
2
guest271314
14 फरवरी 2016, 00:19