so creating test webpage having trouble getting :hover command work properly. no matter have tried research seems work in need of help.
i trying blur out image , have text fade in, got stuck @ having image blur out using webkit filters. stripped , tried changing 1 colour another, , did not work. seems problem?
html
#menuhome { top:-20px; right:130px ; font-size: 40px; } #checkout { left:190px } body { height:1100px; } /*content*/ #content { position:absolute; top:100px; width:1100px; height: 2000px ; left:50% ; margin-left: -550px; background-color: #ecf0f1; border-radius:15px; box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31); z-index: -1 } #content_products { position:absolute; top:100px; width:1100px; height: 870px ; left:50% ; margin-left: -550px; background-color: #ecf0f1; border-radius:15px; box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31); z-index: -1 } #topsection { position: absolute; top: 0px; width: 100%; height: 250px; background-image:url(aboutusimage.jpg); border-bottom-style: solid; border-bottom-color: rgba(60, 231, 178, 0.64); border-bottom-width: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; } #aboutus1 { font-family:'ek mukta'; color:white; font-size: 48px; z-index: 5; text-align: center; padding: 50px } #info { z-index:0; position: absolute; top:255px; width: 1100px; } .telescopeslink { position:absolute; display:inline-block; left:585px; top:30px; height:250px; width:500px; } .mountlink { z-index: 1; position:absolute; left:15px; top:30px; height:250px; width:500px; background-color: green; } .mountlink:hover{ z-index: 1; background-color: red; } .astrolink { position:absolute; left:15px; top:330px; height:250px; width:500px; } .accessorieslink { position:absolute; top:330px; left:585px; height:250px; width:500px; } /*with main culprit being */ .mountlink { z-index: 1; position:absolute; left:15px; top:30px; height:250px; width:500px; background-color: green; } .mountlink:hover{ z-index: 1; background-color: red; } <div id="content_products"> <div id="topsection"> <h1 id="aboutus1">products</h1> </div> <div id="info"> <div class="telescopeslink"> <img src="telescopes.jpg" > </div> <div class="mountlink"> </div> <div class="astrolink"> <img src="astro.jpg" > </div> <div class="accessorieslink"> <img src="accessories.jpg"</img> </div> </div> </div> i cant work, or advice appreciated
because #content_products positioned absolutely minus z-index, body element on top of it, when hover on green box, hovering on body tag above it.
if did
body:hover .mountlink{ z-index: 1; background-color: red; } you'll see work, main issue z-index:-1 on #content_products
Comments
Post a Comment