2010-09-13 34 views
8

के साथ समस्या का चयन करें एक दोस्त और मैं IE (7/8) को काम करने की कोशिश कर रहा हूं। हम यहाँ एक विहित उदाहरण का निर्माण किया है:आईई होवर

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

एक सीएसएस मेनू का उपयोग करना, हम उन्हें चयन करना चाहते हैं। हालांकि, आईई में, जब आप चयन बॉक्स से बातचीत करते हैं तो मेनू दूर हो जाता है। हमें विश्वास है कि घटनाओं को प्रभावित करने के तरीके में यह एक बग के साथ क्या करना है।

क्या कोई कामकाज है? कम से कम शुद्ध सीएसएस या डोम हैक्स के साथ?

+0

जो आईई संस्करण आप के बारे में बात की जाती है? –

+0

मुख्य रूप से 7 और 8 (* संपादित करें *) – MathGladiator

+0

मैंने आईई 7 और क्रोम –

उत्तर

8

मुझे नहीं लगता कि इसके आसपास एक शुद्ध सीएसएस तरीका है। यह आईई चुनिंदा तत्वों पर घटनाओं को संभालने के तरीके के लिए एक बहुत ही आम बग के कारण है।

आप फिर भी जावास्क्रिप्ट के साथ आस-पास काम कर सकते हैं:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.nav_element a').mouseover(function() { 
      $('.submenu').hide(); 
      $(this).parent().find('.submenu').show(); 
     }); 

     $('.submenu').mouseover(function() { 
      $(this).show(); 
     }); 

     $('.submenu').mouseout(function (e) { 
      // Do not close if going over to a select element 
      if (e.target.tagName.toLowerCase() == 'select') return; 
      $(this).hide(); 
     }); 

    });  
</script> 

कोड ऊपर jQuery का उपयोग करती।

1

यहाँ IE7/8 में चुनिंदा व्यवहार सुधरनेवाला के लिए एक रास्ता है, लेकिन यह समस्या ठीक नहीं होती

DOCTYPE बदलें

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

जोड़े स्क्रिप्ट

<script> 

    function ddlOut(e) { 
     setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000) 
    } 

</script> 

सीएसएस

जोड़ें
#nav .over div.submenu 
    { 
     display: block; 
    } 

    #nav .nav_element{ 
     behavior: expression(
      this.onmouseover = new Function("this.className += ' over'"), 
      this.onmouseout = new Function("ddlOut(this)"), 
      this.style.behavior = null 
     ); 
    } 

यह कम से कम बेहतर काम करेगा लेकिन बिल्कुल सही नहीं होगा।

मेरी सलाह है कि एचटीएमएल समकक्ष पर चयन नियंत्रण को बदलना है। मैं OboutDropDown का उपयोग करता हूं जिसमें एक अच्छा दृश्य है। ऐसे कई कार्यान्वयन हैं जो आपको आवश्यक सूट कर सकते हैं।

0

सबसे पहले आपको अपने मेनू के नीचे होवर सतह का विस्तार करने की आवश्यकता है।
तो अपने सीएसएस में width:310px;height:220px से #nav .nav_element a जोड़ें।

अब (यह भी एक वर्ग या दूसरे div पर एक आईडी top:220px के साथ स्टाइल जोड़ने) तुम सिर्फ अनुकरण करने के लिए एक mousedown शुरू हो रहा है जब आप का चयन पर क्लिक जो रुक जाएगा की जरूरत है जब विकल्पों के बीच चयन किया जाता है - यदि आप ऑनफोकस चुनिंदा राज्य की स्थिति चुनते हैं तो आप शायद अंतिम भाग कर सकते हैं जो mousedown को रोक देगा।