robinandersen Posted June 22, 2012 Share Posted June 22, 2012 (edited) Hello! I'm new here and I am dealing with a little problem which I hope you guys can help me with! What I want to achieve: Basically what I want to happen is that when the logo gets hovered the black message box will fade in using css transitions. Take a look at the image below and you will get me. And when the mouse moves away from the logo the message box fades out to zero again. But something is wrong, I dont know what. https://docs.google.com/file/d/0B0ONzhkyFUwhQXNOTFJzb0lVSFE/edit?pli=1 <-- image to make you understand. What I am dealing with: Thanks for staying with me, here is my HTML, CSS AND jQuery HTML: <div id="colume"> <div id="logo-to-hover"><a href="#"><img src="images/villave-logo.png" alt="villave-logo" width="220" height="53" /></a> </div> <!-- end logo-to-hover--> </div> <!-- end colume--> <div id="message"> <div id="box-1" class><p>Byggvareforhandler</p> </div> <!-- end box1 --> </div><!-- end message--> jQuery: <script>$(function() { $( "#logo-to-hover" ).hover(function() { $( "#box-1" ).toggleClass( "box-a"); return false; });}); </script> CSS: #logo-to-hover { width: 220px; height: 55px; margin-right: 20px; float: left; } #boxes { width: 940px; height: 71px; margin-left: auto; margin-right: auto; position: absolute; } #box-1 { height: 44px; width: 200px; margin-left: 10px; margin-right: 10px; background-image: url(../images/hoverbg.png); float: left; text-align: center; opacity: 0; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }.box-a { opacity: 1; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; } Edited June 22, 2012 by robinandersen Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now