مسج / جافا سكريبت: IE تحوم لا يشمل خيارات مربع مختارة؟

Question

ولدي هذا الشيء من النصي لتوسيع مربع النص عند تمرير الماوس وتقصير على تمرير الماوس بعيدا.

والمشكلة أواجه هو أن Internet Explorer لا يبدو أنها تمتد انها تحوم فوق خيارات مربع حدد.

وهذا يعني في IE استطيع ان اضغط على اختيار، وانخفاض الخيارات أسفل، ولكن إذا حاولت اختيار واحد، تختفي وحدد مربع إعادة الأحجام بمجرد أن تتحرك قبالة حدد مربع نفسها.

ورمز مثال:

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

و:

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

هل هناك أي حلول لصناديق مختارة في IE؟ وأود أن تنظر حتى استبدال مسج إذا كان أي شخص يمكن أن يوصي واحد التي يمكن الاعتماد عليها حقا.

وشكرا!

Answer 1

ويبدو IE لا تعتبر القائمة المنسدلة جزءا قليلا من العنصر حدد. انها قابلة للتنفيذ، لكنه يأخذ قليلا من الغش مع خصائص expando والأحداث طمس / التركيز على تمكين وتعطيل "إخفاء" تأثير لوقفه الركل في حين يدخل الماوس الجزء المنسدل من عنصر.

هل لديك الذهاب مع هذا:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

و(الاعتذار إذا هذه ليست الطريقة واحدة من المفترض أن استخدام مسج - لقد استعملت من قبل أبدا:))

Answer 2

ويبدو وكان هذا المنصب لفترة من الوقت، ولكن نأمل لا تزال هناك الناس ترغب في الحل. لقد واجهت هذه المسألة في حين أن بناء من موقع جديد أن أعمل على. على ذلك هو المنزلق المنتج، ولكل منتج، وإصطياد الفئران على المنتج ينبثق فقاعة إعلامية كبيرة مع معلومات حول المنتج، والمنسدلة لتحديد خيارات شراء، وزر شراء. اكتشفت بسرعة أن في أي وقت تركت الماوس بلدي المنطقة المرئية الأولى من قائمة التحديد (أي، في محاولة لتحديد خيار)، فقاعة كلها سوف تختفي.

والجواب (شكرا، والناس الذكية التي وضعت مسج)، وكان كل شيء عن الحدث محتدما. كنت أعرف أن الطريق الأكثر مباشرة لإصلاح المشكلة كان لا بد مؤقتا "تعطيل" الدولة من تحوم. لحسن الحظ، مسج لديها وظيفة بنيت في التعامل مع الحدث السطح (يسمونه نشر).

وفي الأساس، مع فقط عن خط أو نحو ذلك من القانون الجديد، ويعلق وسيلة لهذا الحدث "onmouseleave" من القائمة المنسدلة (إصطياد الفئران فوق أحد الخيارات في قائمة مختارة يبدو انه يؤدي الى هذا الحدث بشكل موثوق - حاولت يبدو بعض الأحداث الأخرى، ولكن هذا واحد لتكون صلبة جدا) التي إيقاف انتشار الحدث (أي لم يسمح عناصر الأم أن نسمع عن هذا الحدث "onmouseleave" من القائمة المنسدلة).

وهذا ما كان! وكان الحل أكثر من ذلك بكثير الأنيق الذي كنت أتوقع لها أن تكون. ثم، عندما يترك الماوس فقاعة، والدولة من تحوم مشغلات عادة وموقع تطول عن أعمالها. وفيما يلي الإصلاح (وضعه في document.ready):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Answer 3

والجواب WorldWideWeb وعملت تماما.

وكان لي مشكلة مختلفة سلايتي، كان لي تأثير تحوم على احتواء البند (تحوم ليكشف عن القائمة المختارة) من حقل النموذج وعلى مستخدمي IE لا يمكن اختيار من القائمة المنسدلة (احتفظ إعادة تعيين قيمة) . وأضاف لي اقتراح worldwideweb ل(مع معرف حدد) وفيولا، عملت.

وهنا ما فعلته:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

Answer 4

وكان نموذج تم إخفاء / إظهار استنادا تحوم. إذا ركزت المستخدم على تحديد شكل أصبح المخفية. وكنت قادرا على حل مشكلتي مع شيء من هذا القبيل:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

Answer 5

وكان نفس المشكلة، والجواب WorldWidewebb وعملت بشكل جيد جدا على IE8. أنا فقط إجراء تغيير طفيف، وإزالة "حدد" من محدد، لأنني شملت فئة حدد مربع في محدد. جعلت من الإصلاح بسيط حقا.

وأيضا، كان لي أن تنفذ على القائمة التي يستخدم hoverIntent مسج المساعد، مع أية مشاكل. (لا تدخل).