ली तत्वों में एक दूसरे के बगल में मेरी 6 छवियां हैं। अब जब मैं उनमें से एक को हॉवर करता हूं, तो मैं उस छवि का आकार बदलना चाहता हूं। यह काम करता है:
<img class="hoverific" width="35" height="35" src="/images/test.jpg" style="display: inline-block; width: 35px; height: 35px; overflow: hidden;">
सीएसएस:
.hoverific {
text-align: center;
vertical-align: middle;
width: 35px;
height: 35px;
}
जे एस:
jQuery(".hoverific").hover(function() {
jQuery(this).stop().animate({
width: 360,
height: 360,
});
}, function() {
jQuery(this).stop().animate({
width: 35,
height: 35,
});
});
यह मेरे द्वारा रोकी गई छवि का आकार बदलता है, लेकिन चारों ओर सब कुछ गड़बड़ कर देता है। मैं jQuery का उपयोग कर hovered छवि का एक चिकनी आकार चाहते हैं। क्या दृष्टिकोण सही है, या ऐसा करने का एक बेहतर तरीका है?
धन्यवाद!
उत्तर:
उत्तर № 1 के लिए 1आपकी समस्या का समाधान आकार की छवि के हाशिये को बदलना होगा।
jQuery(".hoverific").hover(function() {
jQuery(this).css("z-index",2).stop().animate({
width: 360,
height: 360,
"margin-right": -325,
"margin-bottom": -325,
});
}, function() {
jQuery(this).css("z-index",1).stop().animate({
width: 35,
height: 35,
"margin-right": 0,
"margin-bottom": 0,
});
});
-325 का मार्जिन परिवर्तन -360 + 35 से आता है (यदि तत्व का प्रारंभिक मार्जिन 0 है)। यदि मार्जिन 0 नहीं है, तो -360 + 35 + सही (या नीचे) मार्जिन का उपयोग करें।
जोड़ना position: relative; काम करने के लिए z- इंडेक्स के लिए आपकी सीएसएस पर (यदि नहीं, तो आपकी विस्तारित वस्तु आंशिक रूप से दूसरों द्वारा कवर की जा सकती है)।