सीएसएस: होवर छद्म-वर्ग काम नहीं कर रहा है

Question

मुझे एक सीएसएस :hover छद्म-वर्ग मिला है जो किसी भी परिणाम का उत्पादन नहीं कर रहा है।

मैं कुछ छवि गैलरी कोड के साथ गड़बड़ कर रहा था, और मैंने यह स्निपेट प्राप्त करने में कामयाब रहा है जो काम नहीं करता है। मैं समझ नहीं सकता क्यों। यहां आकार के संबंध में कुछ वीडर सीएसएस नियम हैं क्योंकि इन divs में आम तौर पर छवियां होती हैं। मैंने सादगी के लिए छवियों को हटा दिया, लेकिन नियमों को छोड़ दिया।

अन्य :hover उसी पृष्ठ पर तत्व काम कर रहे हैं।

मुझे यकीन नहीं है कि समस्या के बारे में और क्या कहना है, क्योंकि यह इतना बुनियादी है। मैं शायद कुछ वास्तव में स्पष्ट याद कर रहा हूँ।

यहाँ JSFiddle - http://jsfiddle.net/GbxCM/

Answer 1

कुछ मामलों (ज्यादातर absolute स्थिति के साथ) में, आप एक लागू नहीं कर सकते :hover छद्म-वर्ग ऐसा करने के लिए display: inline-block; के साथ mething।

तो, मैं आगे float: left; साथ चला गया और यह जगह ले ली - (नोटिस, यह पूरी तरह से काम करेगा ब्राउज़र सिर्फ :hover रूप से पंजीकृत नहीं है कि आप क्रोम है, तो तत्व का निरीक्षण का उपयोग करें और जोड़ने :hover खुद के लक्षण!।) , एक मार्जिन जोड़ा (inline-block देखो अनुकरण करने के लिए), और br को clear में बदल दिया। परिणाम this jsFiddle में है।

Answer 2

मेरा अनुमान है कि आप क्या करने की कोशिश कर रहे हैं सही ढंग से क्या है, तो आप स्थिति या कि कोई भी परिवर्तन की जरूरत नहीं है। एकमात्र परिवर्तन जो मैं देख सकता हूं वह आपको पृष्ठभूमि रंग बदल रहा है। Here's the fiddle I made to clarify that response.

यहाँ पठनीयता के लिये कोड है:

एचटीएमएल

<div class="wrapper"> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <br> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
</div>​ 

सीएसएस

.wrapper { 
    height: 600px; 
    width: 600px; 
    overflow: hidden; 
    position: relative; 
} 

.squareswrapsolo { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    overflow: hidden; 
    background: #ccc; 
} 
.squareswrapsolo:hover { 
    background: #000; 
}​