मेरा कोड कुछ इस तरह है

$(document).on('mouseenter', '.gallery li', function() {
    $(this).find('img').addClass(".gray");
    var imgs = `<div id="preview"> <img src="images/medium/${$(this).find('img').attr('id')}"
                alt="${$(this).find('img').attr('alt')}"/></div>`;
    var info = `<p>
                'Title': ${$(this).find('img').attr('alt')}
                'City': ${$(this).find('img').attr('city')}
                'Date Taken': ${$(this).find('img').attr('taken')};
                </p>`;
    // imgs += info;
    $("body").append($(imgs));
    console.log(imgs);
})

मैं स्थिति को परिभाषित करने के लिए सीएसएस वर्ग का उपयोग कर रहा हूँ

$( document ).on( "mousemove", function( event ) {
    $("#preview").css("left", event.pageX);
    $("#preview").css("top", event.pageY);
});
#preview {
    position: absolute;
    padding: 10px 10px 0 10px;
    display: none;
    background-color: #424242;
}
.gray {
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

मैंने छवि पथों की जाँच की है, वे सही हैं।

जब माउस होवर किया जाता है तो मैं एक छवि पॉपअप करना चाहता हूं। मैं कंसोल में सही ढंग से रिपोर्ट की जा रही घटनाओं को देखने में सक्षम हूं लेकिन फ्रंट साइड पेज पर कुछ भी नहीं होता है।

0
kl_divergence 27 सितंबर 2020, 19:21

1 उत्तर

सबसे बढ़िया उत्तर

समस्या सीएसएस है। आपके पास #preview {display: none} है, जो इमेज के पैरेंट डिव को छुपा रहा है। यदि आप display: none को हटाते हैं, तो यह दिखना चाहिए।

साथ ही, आपको कक्षा जोड़ते समय . को शामिल करने की आवश्यकता नहीं है:

$(this).find('img').addClass("gray") // Note that there is no '.'
2
Ludolfyn 27 सितंबर 2020, 21:36