JQuery এর সাথে উপাদানগুলির উপর ঘুরে বেড়াচ্ছে কিনা তা সনাক্ত করুন

Question

ঘোরাঘুরির সময় আমি কল করার জন্য কোনও ক্রিয়া খুঁজছি না , বরং পরিবর্তে কোনও উপাদান বর্তমানে আটকানো হচ্ছে কিনা তা বলার উপায় । এই ক্ষেত্রে:

$('#elem').mouseIsOver(); // returns true or false

এমন কোন jQuery পদ্ধতি আছে যা এটি সম্পাদন করে?

Comments

সেক্ষেত্রে

— জো ই।

সদৃশ হিসাবে চিহ্নিত করা বেশ ভুল দেখাচ্ছে। অপ্টের মন পড়ার জন্য এবং অন্যটির পক্ষে এটি একটি সংঘর্ষ সনাক্তকরণের প্রশ্ন এবং নকল হিসাবে চিহ্নিত করার সিদ্ধান্ত নিতে উদ্দেশ্যটি কী তা প্রশ্নটি করে না।

— মেলিগি

Answer 1

আসল (এবং সঠিক) উত্তর:

আপনি is()নির্বাচকটির জন্য ব্যবহার করতে পারেন এবং পরীক্ষা করতে পারেন :hover।

var isHovered = $('#elem').is(":hover"); // returns true or false

উদাহরণ: http://jsfiddle.net/Meligy/2kyaJ/3/

(এটি কেবল তখনই কার্যকর হয় যখন নির্বাচক এক উপাদান সর্বাধিকের সাথে মেলে more আরও তথ্যের জন্য 3 সম্পাদনা দেখুন)

।

সম্পাদনা 1 (জুন 29, 2013): (শুধুমাত্র jQuery 1.9.x প্রযোজ্য, এটি 1.10+ এর সাথে কাজ করে, পরবর্তী সম্পাদনা 2 দেখুন)

এই উত্তরটি প্রশ্নের উত্তর দেওয়ার সময় সেরা সমাধান ছিল solution এই ': হোভার' নির্বাচককে .hover()jQuery 1.9.x সালে পদ্ধতি অপসারণের সাথে সরানো হয়েছে।

মজার বিষয় হল "অ্যালিকারন" এর সাম্প্রতিক উত্তরটি দেখায় যে :hoverআপনি যখন কোনও নির্বাচকের সাথে উপসর্গ করেন তখন এটি সিএসএস নির্বাচক (বনাম সিজল) হিসাবে ব্যবহার করা সম্ভব $($(this).selector + ":hover").length > 0এবং এটি কাজ করে বলে মনে হয়!

এছাড়াও, অন্য উত্তরে উল্লিখিত হোভারআইন্টেন্ট প্লাগইনটি দেখতে খুব সুন্দর দেখাচ্ছে।

সম্পাদনা 2 (21 সেপ্টেম্বর, 2013): .is(":hover") কাজ করে

অন্য একটি মন্তব্যের উপর ভিত্তি করে আমি লক্ষ্য করেছি যে আমি যেভাবে পোস্ট করেছি .is(":hover"), মূলত এখনও jQuery তে কাজ করে।

1. এটি jQuery 1.7.x এ কাজ করেছে।

2. এটি ১.৯.১-এ কাজ করা বন্ধ করে দিয়েছিল, যখন কেউ আমাকে এটি জানিয়েছিল এবং আমরা সকলেই ভেবেছিলাম hoverযে এটি সংস্করণে ইভেন্ট পরিচালনা করার জন্য উপনামটি সরিয়ে জিকুরির সাথে সম্পর্কিত ।

3. এটি jQuery 1.10.1 এবং 2.0.2 (সম্ভবত 2.0.x) এ আবার কাজ করেছে, যা সূচিত করে যে 1.9.x এ ব্যর্থতা একটি বাগ ছিল বা তাই আমরা পূর্ববর্তী বিষয়টিতে যেমন বিবেচনা করেছি তেমন উদ্দেশ্যমূলক আচরণ ছিল না।

যদি আপনি এটি কোনও নির্দিষ্ট jQuery সংস্করণে পরীক্ষা করতে চান তবে এই উত্তরের শুরুতে JSFidlle উদাহরণটি খুলুন, পছন্দসই jQuery সংস্করণে পরিবর্তন করুন এবং "রান" ক্লিক করুন। যদি হোভারের উপর রঙ পরিবর্তন হয় তবে এটি কাজ করে।

।

সম্পাদনা 3 (মার্চ 9, 2014): এটি কেবল তখনই কাজ করে যখন jQuery ক্রমটিতে একটি একক উপাদান থাকে

মন্তব্যগুলিতে @ উইলমার দেখানো অনুসারে, তাঁর একটি ফ্রিডল রয়েছে যা আমি এবং অন্যরা এখানে jQuery সংস্করণগুলির বিরুদ্ধেও কাজ করে না। যখন আমি তার মামলার বিশেষ বিষয়গুলি অনুসন্ধান করার চেষ্টা করলাম তখন আমি লক্ষ্য করেছি যে তিনি একবারে একাধিক উপাদান চেক করার চেষ্টা করছেন। এই নিক্ষেপ করা হয়েছিল Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover।

সুতরাং, তার মজার সাথে কাজ করা, এটি কাজ করে না :

var isHovered = !!$('#up, #down').filter(":hover").length;

এই করে কাজ:

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

এটি jQuery সিকোয়েন্সগুলির সাথেও কাজ করে যার মধ্যে একটি একক উপাদান রয়েছে, যেমন যদি মূল নির্বাচক কেবলমাত্র একটি উপাদানের সাথে মিলে যায়, বা যদি আপনি .first()ফলাফলগুলি আহ্বান করেন ইত্যাদি etc.

এটি আমার জাভাস্ক্রিপ্ট + ওয়েব দেব টিপস এবং সংস্থানসমূহ নিউজলেটারেও উল্লেখ করা হয়েছে ।

Comments

দুর্দান্ত, সাধারণ কাজ করে। ধন্যবাদ মোহাম্মদ!

— জেমস স্কিডমোর

আইই 8: এ একটি ত্রুটি ফেলে Syntax Error, unrecognized expression: hover. jquery-1.7.js line 4179।

— রবজি

সেটা সত্য. শুধু এটি পরীক্ষা করা। আই 6 এর জন্য, এখানে peterned.home.xs4all.nl/csshover.html বর্ণিত এই হ্যাকটি ব্যবহার করে দেখুন বা সাধারণ হোভারে ফিরে এসে কিছু রাজ্য যুক্ত করুন এবং এটি পরবর্তী ধরণের সমাধান সাফ করুন।

— মেলিগি

: @Meligy: আমি ছবি আঁকা যে এটা নির্বাচন একাধিক আইটেম সঙ্গে কাজ করছে না আপনার বেহালার forked থাকেন jsfiddle.net/p34n8

— SuperNova

এছাড়াও আপনি যদি jQuery মোবাইল ব্যবহার করেন তবে এটি এটিকে তীব্র করে তুলবে - জিডিয়ানের উত্তরে ফ্রিডলটি পরীক্ষা করে দেখুন এবং jQuery মোবাইলটি 1.4.4 বাক্সটি চালু করুন এবং আপনি দেখতে পাবেন যে এটি তখন কাজ করে না ... আমি এটির সাথে তার একই বিষয়টি নিশ্চিত করতে পারি 1.4.2 aswell :(

— ডেভিড ও'সুলিভান

Answer 2

ব্যবহার করুন:

var hovered = $("#parent").find("#element:hover").length;

jQuery 1.9+

Comments

এটি দুর্দান্তভাবে কাজ করে। .ওভার ফাংশন এবং: হোভার সিলেক্টারের প্রতিস্থাপনের জন্য ব্রাউজ করার সময় সেরা সমাধান পাওয়া গেছে। ধন্যবাদ!

— টাইলার

একটি যাদুমন্ত্র মত কাজ করে! :)

— jroi_web

Answer 3

এটি jQuery 1.9 এ কাজ করে না। ব্যবহারকারী 2444818 এর উত্তরের ভিত্তিতে এই প্লাগইনটি তৈরি করেছে।

jQuery.fn.mouseIsOver = function () {
    return $(this).parent().find($(this).selector + ":hover").length > 0;
}; 

http://jsfiddle.net/Wp2v4/1/

Answer 4

হোভারে একটি পতাকা সেট করুন:

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

তারপরে আপনার পতাকাটি যাচাই করুন।

Comments

সহজ, তবে সহজেই পুনরায় ব্যবহৃত হয়নি। : /

— ট্রেভর

আমার বিশেষ পরিস্থিতিতে কাজ করেছে বলে মনে হয় নি, তবে আমি সম্মত হলাম এটি অন্যথায় যাওয়ার ভাল উপায়। আমার ক্ষেত্রে, আমি যখন mouseleaveএকটি উপাদান, আমি মাউস অন্য নির্দিষ্ট উপাদান প্রবেশ করেছে কিনা তা পরীক্ষা করে দেখতে চাই।

— জেমস স্কিডমোর

@ জেমসকিডমোর - মাউসলেভ ইভেন্টে আপনি e.fromElementএবং ব্যবহার করতে পারেন e.toElement। এটা কি আপনার জন্য কাজ করবে?

— mrtsherman

প্রযোজ্য সমস্ত উপাদানকে কভার করে এমন নির্বাচক ব্যবহার করতে আপনি এটি আপডেট করতে পারেন এবং পৃথক উপাদান ব্যবহার করে পতাকাটি সংরক্ষণ করতে পারেন .data()।

— nnnnnn

@ ট্র্যাভর - সত্য - আপনাকে উপাদানটি রাষ্ট্রের মধ্যে সংরক্ষণ করতে হবে তারপরে একটি ফাংশন তৈরি করতে হবে যা উপাদানটির (সম্ভবতঃ ডেটা-ট্যাগ) অবস্থা পরীক্ষা করে।

— কিনকুটা

Answer 5

এই বিষয়টিতে কিছুক্ষণ কাজ করার পরে যুক্ত হওয়া যুগল আপডেট:

1. .is (": হোভার") সহ সমস্ত সমাধান jQuery 1.9.1 এ বিরতি
2. মাউস এখনও কোনও উপাদানটির উপরে রয়েছে কিনা তা যাচাই করার সম্ভবত কারণ হ'ল ঘটনা একে অপরের উপর গুলি চালানো রোধ করার চেষ্টা করা। উদাহরণস্বরূপ, আমাদের মাউসলেভটি আমাদের মাউসেনটার ইভেন্টটি সম্পূর্ণ হওয়ার আগেই ট্রিগার এবং সম্পূর্ণ হওয়ার বিষয়ে সমস্যা ছিল। অবশ্যই এটি ছিল দ্রুত মাউস চলাচলের কারণে।

আমরা আমাদের জন্য সমস্যা সমাধানের জন্য হোভারআইন্টেন্ট https://github.com/briancherne/jquery-hoverInttent ব্যবহার করেছি । মূলত মাউস চলাচল আরও ইচ্ছাকৃত হলে এটি ট্রিগার করে। (একটি বিষয় লক্ষণীয় যে এটি কোনও মৌলকে প্রবেশ করে এবং ছেড়ে যাওয়ার ক্ষেত্রে উভয়ই মাউসকে ট্রিগার করবে - যদি আপনি কেবলমাত্র একটি পাস নির্মাণকারীর একটি ফাঁকা ফাংশন ব্যবহার করতে চান)

Answer 6

আপনি সমস্ত আটকে থাকা উপাদান থেকে আপনার এলিমেন্ট ফিল্টার করতে পারেন। সমস্যাযুক্ত কোড:

element.filter(':hover')

কোড সংরক্ষণ করুন:

jQuery(':hover').filter(element)

বুলিয়ান ফিরে আসতে:

jQuery(':hover').filter(element).length===0

Answer 7

গৃহীত উত্তরটি আমার জন্য JQuery 2.x .is(":hover")এ কাজ করে না প্রতিটি কলটিতে মিথ্যা ফিরিয়ে দেয়।

আমি একটি দুর্দান্ত সহজ সমাধান দিয়ে শেষ করেছি যা কাজ করে:

function isHovered(selector) {

    return $(selector+":hover").length > 0

}

Answer 8

@ মোহাম্মদের উত্তরে প্রসারিত হচ্ছে। আপনি সামান্য এনকেপসুলেশন ব্যবহার করতে পারেন

এটার মত:

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

এটি ব্যবহার করুন:

$("#elem").mouseIsOver();//returns true or false

ভাঁজটি কাঁটাচামচ করেছেন: http://jsfiddle.net/cgWdF/1/

Comments

এটি করার জন্য, আপনি এছাড়াও করতে পারেন: jQuery.fn.mouseIsOver = ফাংশন () {রিটার্ন $ (এটি [0]) is; (': হোভার')}; কম কোড

— লাতান

সহজেই to ('# এলিম') করা কতটা কঠিন is (': হোভার')

— ভাগ্যক্রীড়িশ

কঠোর বিষয় নয় তবে আরও উদ্দেশ্য স্পষ্টভাবে প্রকাশ করা হয়েছে। তবে প্রত্যেকের কাছে এটি নিজস্ব।

— জিদান

Answer 9

আমি প্রথম প্রতিক্রিয়াটি পছন্দ করি তবে আমার কাছে এটি অদ্ভুত। মাউসটির জন্য পৃষ্ঠা লোডের পরে পরীক্ষা করার চেষ্টা করার সময়, এটির কাজ করার জন্য আমাকে কমপক্ষে 500 মিলিসেকেন্ড বিলম্ব রাখতে হবে:

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

Answer 10

কিনকুতার উত্তর অনুসারে পতাকা স্থাপন করা যুক্তিসঙ্গত বলে মনে হচ্ছে, আপনি একটি শ্রোতার গায়ে লাগাতে পারেন যাতে আপনি কোনও তাত্ক্ষণিক সময়ে কোনও উপাদান আটকানো হচ্ছে কিনা তা পরীক্ষা করতে পারেন।

তবে, আপনি কীভাবে শিশু নোডগুলি মোকাবেলা করতে চান? আপনার সম্ভবত এটি পরীক্ষা করা উচিত যে উপাদানটি বর্তমানে আটকানো উপাদানটির পূর্বপুরুষ কিনা।

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>