उसी स्थिति पर होवर पर div दिखाएं

मैं माउसओवर पर div दिखाने की कोशिश कर रहा हूं, लेकिन यह झटकेदार है, मैं किसी भी झटके के बिना कैसे दिख सकता/छुपा सकता हूं और संक्रमण के साथ चिकनी हूं?उसी स्थिति पर होवर पर div दिखाएं

मैंने jquery के साथ-साथ अभी भी झपकी का उपयोग करके फीका इन/आउट करने का प्रयास किया है।

यहाँ कोड

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.front:hover + .back { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

स्रोत

2017-09-04 Sanjeev Kumar

आपकी समस्या है, कि अगर वापस div दिखाता है, आप अब, सामने div पर मँडरा रहे हैं तो यह गायब हो जाता है, तो आप पर मँडरा रहे हैं सामने div फिर से, तो पिछला div reappears - आदि विज्ञापन मतली। अगर मैं आप थे, तो मैं जेएस या JQuery – Tijmen

@Tijmen का उपयोग करके 'माउससेन्टर'/'माउसलेव' दृष्टिकोण के लिए जाऊंगा, मैंने सोचा था कि जब तक मैंने – Script47

@ Script47 से नीचे जवाब नहीं देखा, तब तक जावास्क्रिप्ट की आवश्यकता होगी हाँ, मैंने भी विचार नहीं किया था सीएसएस केवल समाधान है, जो शायद बेहतर है। – Tijmen

यह flickers क्योंकि हर बार .back दिखाई देने लगता है, .front पर मंडराना अब मान्य नहीं है। इस के लिए हल करने के लिए आप .back:hover जो .front:hover + .back

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.front:hover + .back, 
 
.back:hover { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

स्रोत

2017-09-04 15:10:01 Dij

के लिए के रूप में .back:hover के लिए एक ही सीएसएस शैली का उपयोग करके किया जा सकता पर दिखाई के रूप में .back की दृश्यता सेट कर सकते हैं क्या होगा यदि आप .back तत्व के अंदर डाल .col तत्व, .front तत्व शैलियों को .col तत्व पर ले जाएं और transition.col तत्व जोड़ें? मुझे लगता है कि ब्राउज़र समर्थन के संदर्भ में यह एक बेहतर समाधान है।

body { 
 
    margin: 0; 
 
} 
 
.row { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.col { 
 
    float: left; 
 
    width: 25%; 
 
    position: relative; 
 
    margin: 0 10px 0 0; 
 
    height: 300px; 
 
    background-color: #999 
 
} 
 
.back { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 300px; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    background-color: #ff0; 
 
    z-index: 2; 
 
    width: 100%; 
 
    transition: all 0.2s; 
 
} 
 
.col:hover .back { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
</div>

स्रोत

2017-09-04 15:10:10

'फ्रंट' के अंदर 'बैक' डालने से गलत अर्थशास्त्र है। – Bergi

@ बरगी लेकिन क्यों? –

क्योंकि कॉलम का अगला पक्ष है और दूसरा कॉलम का पिछला पक्ष है। पीठ सामने का हिस्सा नहीं है। – Bergi

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.col:hover > .back { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

.col:hover > .back { 
    opacity: 1; 
    visibility: visible; 
}

मैं एक सरल उपाय है।

.front:hover + .back =>.col:hover > .back बदलें।

स्रोत

2017-09-04 15:10:31 zynkn

समस्या है जब आप मंडराना .front div .back div, प्रतीत होता है कि तो अब आप .back div नहीं .front तो यह फिर से गायब हो जाता है, और पाश मँडरा रहे हैं कायम है। इसे ठीक करने के लिए, पर होवर प्रभाव जोड़ें। div भी। transition से जोड़ें। चिकनी प्रभाव के लिए।

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
    transition: 0.2s ease; 
 
} 
 
.front:hover + .back, .back:hover { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

स्रोत

2017-09-04 15:14:08 FrydrykChopin

मुख्य समस्या यह है कि आप जो वास्तव में "शूटिंग" "एनीमेशन" बताने के लिए नहीं कर पाए हैं है। front और back दोनों एक ही स्तर पर हैं, इसलिए इसे उस स्तर से करना संभव नहीं है, लेकिन यदि आप इसे मूल तत्व के माध्यम से शूट करते हैं, तो इसे काम करना चाहिए।

दृष्टिकोण इस प्रकार होगा:

.col:hover .back { 
    opacity: 1; 
    visibility: visible; 
}

स्रोत

2017-09-04 15:15:19

उसी स्थिति पर होवर पर div दिखाएं

उत्तर

संबंधित मुद्दे