मेरे पास मेरे पृष्ठ के शीर्ष पर एक div है, जिसमें कुछ हेडर टेक्स्ट है, जो mouseenter पर, कुछ छोटे टेक्स्ट को प्रकट करने के लिए (ऊंचाई में) विस्तारित होना चाहिए। फिर, mouseleave पर, इसे वापस लेना चाहिए। यह जितना लगता है उससे कहीं ज्यादा कठिन है...

समाधान चाहिए:

  1. केवल हेडर फिट करने के लिए ऊंचाई से जाएं, सभी टेक्स्ट फिट करने के लिए ऊंचाई तक जाएं।
  2. एक से दूसरे में संक्रमण।
  3. शुद्ध सीएसएस का उपयोग करने का प्रयास करें।
  4. यदि माउस छोड़ता है, और वीज़ा वर्सा (सीएसएस में डिफ़ॉल्ट, लेकिन jQuery में नहीं) तो विस्तारित एनीमेशन रोकें।

मैं प्रयास कर चुका हूं:

  1. मेरी स्टाइलशीट में :hover का उपयोग, सेट पिक्सेल मान से auto में बदलने के लिए, जैसा कि यह प्रश्न (लेकिन मेरा यह शुद्ध सीएसएस है)। इससे संक्रमण नहीं हुआ।
  2. विस्तार पर एक निर्धारित ऊंचाई का उपयोग करना, जो विभिन्न व्यूपोर्ट आकारों पर काम नहीं करता है।
  3. max-height का उपयोग करना, और इसे वास्तविक विस्तारित div से बड़े आकार में विस्तारित करना, जैसा कि यह प्रश्न। इसका मतलब है कि ट्रांज़िशन ठीक से काम नहीं करते हैं, और अलग-अलग डिवाइस पर अलग दिखते हैं।
  4. 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