1. घर
  2. सवाल और जवाब
  3. छद्म वर्ग: मंडराना IE7

छद्म वर्ग: मंडराना IE7

2008-09-27 24 views
10

में काम नहीं करता मुझे मिल गया है इस तरह के एक सरल कोड:छद्म वर्ग: मंडराना IE7

<div class="div1"> 
    <div class="div2">Foo</div> 
    <div class="div3"> 
    <div class="div4"> 
     <div class="div5"> 
     Bar 
     </div>   
    </div> 
    </div> 
</div>

और इस सीएसएस:

.div1{ 
    position: relative; 
} 
.div1 .div3 { 
    position: absolute; 
    top: 30px; 
    left: 0px; 
    width: 250px; 
    display: none; 
} 
.div1:hover .div3 { 
    display: block; 
} 
.div2{ 
    width: 200px; 
    height: 30px; 
    background: red; 
} 
.div4 { 
    background-color: green; 
    color: #000; 
} 
.div5 {}

समस्या है: जब मैं .div2 से कर्सर ले जाने के .div3 (.div3 को दिखना चाहिए क्योंकि यह .div1 का बच्चा है) तो होवर अक्षम है। मैं आईई 7 में इसका परीक्षण कर रहा हूं, एफएफ में यह ठीक काम करता है। मैं क्या गलत कर रहा हूं? मुझे यह भी एहसास हुआ है कि जब मैं काम कर रहा हूं .div5 टैग हटा देता हूं। कोई विचार?

स्रोत

2008-09-27 Lukas

+0

ध्यान दें कि यह मामला हो सकता है कि आपको .div3: होवर {डिस्प्ले: ब्लॉक} अन्यथा जब आप अपना माउस ऊपर ले जाएं बच्चे तत्व .div3 माता-पिता अपनी छद्म कक्षा खो देंगे: होवर। यह हालांकि आपके कार्यान्वयन पर निर्भर करता है। – moorej

उत्तर

25

आईई 7 आपको :hover छद्म-वर्गों को गैर-एंकर तत्वों तक लागू करने की अनुमति नहीं देगा जबतक कि आप स्पष्ट रूप से एक डॉक्टरेट निर्दिष्ट नहीं करते हैं। बस अपने पृष्ठ पर एक डॉक्टरेट घोषणा जोड़ें और इसे पूरी तरह से काम करना चाहिए।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

IE7 पर अधिक/quirks मोड this blog post पर पाया जा सकता।

स्रोत

2008-09-27 22:26:02

0

मैंने पाया कि इस समाधान में बेहतर काम किया और थोड़ा क्लीनर था:

<style type="text/css"> 
     * { 
      color: #fff; 
     } 
     .wrapper { 

     } 

     .trigger { 
      background: #223; 
     } 

     .appear { 
      background: #334; 
      display: none; 
     } 

     .trigger:hover .appear { 
      display: block; 
     } 
    </style> 
</head> 

<body> 

    <div class="wrapper"> 
     <div class="trigger"> 
      <p>This is the trigger for the hover element.</p> 
      <div class="appear"> 
       <p>I'm <strong>alive!</strong></p> 
      </div> 
     </div> 
    </div> 

</body>

pastebin।

स्रोत

2008-09-27 09:31:28 Ross

+0

यह DOCTYPE निर्दिष्ट करने से "क्लीनर" है? ऐसा कैसे? – mkoistinen

+3

@mkoistinen ध्यान दें कि यह DOCTYPE उत्तर से 14 घंटे पहले पोस्ट किया गया था, जिसे मैं उस समय के बारे में नहीं जानता था :) – Ross

+0

आह, मेरे बुरे, मुझे सही संदर्भ जानने के लिए तारीखों को देखना चाहिए था। – mkoistinen

संबंधित मुद्दे

 संबंधित मुद्दे