होवर ड्रॉपडाउन के साथ शॉपिंग कार्ट - जावास्क्रिप्ट, एचटीएमएल

मैं शॉपिंग कार्ट के पिछले डिज़ाइन का उपयोग करता हूं, लेकिन विकल्प होवर शॉपपिन कार्ट को लागू नहीं कर सकता, यह एक कोड उदाहरण है।

मेरा कोड

$("#cart").hover(function(e) {
$(".shopping-cart").stop(true, true).addClass("active");
}, function() {
$(".shopping-cart").stop(true, true).removeClass("active");
});

मुझे गाड़ी की सामग्री की आवश्यकता नहीं है जब तक माउस पॉइंटर बाहर न हो जाए।

उदाहरण कोडपेन

पेन देखें शॉपिंग कार्ट ड्रॉपडाउन एडुआर्डो द्वारा (@ alexd2) पर CodePen

उत्तर:

उत्तर № 1 के लिए 1

उपयोग एकाधिक चयनकर्ता आपकी समस्या का समाधान करेगा।

  $("#cart, .shopping-cart").hover(function(e) {
$(".shopping-cart").stop(true, true).addClass("active");
}, function() {
$(".shopping-cart").stop(true, true).removeClass("active");
});

जवाब के लिए 0 № 2

बस इससे "सक्रिय" हटा दें

$(".shopping-cart").stop(true, true).removeClass("active");

इस के लिए

$(".shopping-cart").stop(true, true).removeClass("");

जवाब के लिए 0 № 3

शुद्ध सीएसएस के साथ, आप शायद ऐसा कुछ कर सकते हैं।

.cart {
background-color: lightblue;
float: right;
text-align: right;
position: relative;
}

.list {

background-color: lightgreen;
height: 250px;
width: 300px;
border: 2px solid red;
right: 0;
position: absolute;
transition: 1s all;
transform: scale(0) ;
transform-origin: 100% 0%;
}

.cart:hover > .list {
transform: scale(1);
}
<div>
<div class="cart">
This is a cart
<div class="list">
some long list
</div>
</div>
</div>

position: absolute वैकल्पिक है (साथ में सीएसएस के साथ), बस अगर आपके पास यह नहीं है, तो कार्ट तब तक होगी जब तक बच्चे की चौड़ाई, जो वांछनीय हो या न हो।


संबंधित सवाल
सबसे लोकप्रिय