div

Question

के होवर पर सीएसएस अस्पष्टता मैं सीएसएस के लिए नया हूं। मैं सिर्फ होवर पर एक और div पर एक div चाहता हूँ और इसकी पारदर्शिता में वृद्धि होनी चाहिए। मुझे लगता है कि

<div id="maincontainer"> 
<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div> 
<h1>A floating image</h1> 
<p id="bill"></p> 
<div id="mem">sfasdf</div> 
</div> 
<div id="column1"> 
<p>Haec disserens qua de re agatur et in quo causa consistat non 
videt...</p> 
</div> 
<div id="column2"> 
<p>causas naturales et antecedentes, idciro etiam nostrarum 
voluntatum...</p> 
</div> 
<div id="column3"> 
<p>nam nihil esset in nostra potestate si res ita se haberet...</p> 
</div> 
<div id="slide"> 
<ul> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
</ul> 
</div> 
<div id="left">l</div> 
<div id="right">R</div> 

और सीएसएस फ़ाइल की तरह कुछ बात किया है

body { 
    background-color: #FFCC66; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: 50% 100%; 
    margin-top: 100px; 
    margin-right: 40px; 
    margin-bottom: 100px; 
    margin-left: 70px; 
} 

#picture { 
    height: 200px; 
    width: 170px; 
    float: left; 
} 

#column1 { 
    float: left; 
    width: 33%; 
} 

#column2 { 
    float: left; 
    width: 33%; 
} 

#column3 { 
    float: left; 
    width: 33%; 
} 

#bill { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    letter-spacing: 2px; 
    text-align: justify; 
    line-height: 20px; 
} 

#mem { 
    position: absolute; 
    top: 300px; 
    left: 150px; 
} 

#slide { 
    overflow: hidden; 
    position: absolute; 
    height: 220px; 
    width: 300px; 
    top: 500px; 
    left: 400px; 
    background-color: #333399; 
    z-index: 1; 
} 

#left { 
    position: absolute; 
    top: 500px; 
    left: 400px; 
    height: 220px; 
    width: 30px; 
    background-color: #FF33CC; 
    z-index: 2; 
    text-align: center; 
    color: #000000; 
    vertical-align: middle; 
    opacity: .5; 
} 

#left :hover { 
    position: absolute; 
    top: 500px; 
    left: 400px; 
    height: 220px; 
    width: 30px; 
    background-color: #CCCC00; 
    z-index: 2; 
    text-align: center; 
    color: #000000; 
    filter: alpha(opacity = 10); 
    -moz-opacity: 10; 
    -khtml-opacity: 10; 
    opacity: 10; 
    cursor: pointer; 
} 

मैं आईडी के साथ div की पारदर्शिता मंडराना

Answer 1

पर छोड़ दिया बढ़ाने के लिए मैं अपने कोड को बारीकी से देखा नहीं किया है चाहता हूँ लेकिन एक बात:

यह

#left :hover{ 

सबसे अधिक संभावना है कि आप क्या चाहते हैं। जब माउस यह पर घूमता आप

#left:hover{ 

इसका मतलब है, आईडी left साथ तत्व चाहते हैं। शायद यह पहले से ही इसे हल करने में मदद करता है।

Answer 2

मैं div तत्वों का डर मँडरा हमारे पसंदीदा ब्राउज़र (IE6) में समर्थित नहीं है हूँ, लेकिन अगर आप समर्थन छोड़ करने को तैयार हैं, निम्नलिखित कोड काम करना चाहिए:

#left { 
    opacity: 0.6; /* css standard */ 
    filter: alpha(opacity=60); /* internet explorer */ 
} 

#left:hover { 
    opacity: 1; /* css standard */ 
    filter: alpha(opacity=100); /* internet explorer */ 
} 

Answer 3

आप पारदर्शिता चाहते हैं पुराने ब्राउज़र पर एक हल्के भूरे रंग के साथ एक पारदर्शी .png का उपयोग करें या जो भी हो और इसे अपने अन्य div के शीर्ष पर एक div के रूप में लागू करें। सुनिश्चित करें कि आप स्थिति का उपयोग करें: निश्चित है, इसलिए यह स्क्रॉल के साथ एक साथ तैरता है, अन्यथा जब आप स्क्रॉल करते हैं तो आप इसके नीचे समाप्त होते हैं।