www.webdeveloper.com
Results 1 to 3 of 3

Thread: Hover fadeIn; jQuery

  1. #1
    Join Date
    Jun 2011
    Posts
    14

    Exclamation Hover fadeIn; jQuery

    Hey guys,

    I have a problem making my website. I have this logo, and on hovering I want it to glow.
    Now I have two images logo.png and logoGlow.png and on hovering I want to fadein logoGlow.png.

    Now I have this:

    <head>
    HTML Code:
    <script>
    $(function() {
    			$(".logo")
    			.find("span")
    			.hide()
    			.end()
    			.hover(function() {
    				$(this).find("span").stop(true, true).fadeIn();
    			}, function() {
    				$(this).find("span").stop(true, true).fadeOut();
    			});
    		});
    </script>
    <body>
    HTML Code:
    <a href="index.html" class="logo">Arrow<span></span></a>
    CSS
    Code:
    .logo {
    margin-top: 30px;
    display:inline-block;
    position:relative;
    text-indent: -9999px;
    width: 463px;
    height: 178px;
    background: url(logo.png) no-repeat;
    }
    .logo span {
    position:absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(logoGlow.png) no-repeat;
    }
    But it's not working. Can you guys help me?

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    i created a page with your code and took 2 equal images with the marks 'logo' and 'logoGlow' on them. everything works as it seems... what exactly was the problem?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jun 2011
    Posts
    14
    Quote Originally Posted by Padonak View Post
    i created a page with your code and took 2 equal images with the marks 'logo' and 'logoGlow' on them. everything works as it seems... what exactly was the problem?
    Well, on hovering the image I want to fade in the logoGlow image (wich is different than the logo.png!). But what it does is it just puts the logoGlow.png image on top doesn't hide it and when I hover it also nothing happens. Is it possible that it won't work because I have not put this online yet (so I just open the file index.html on my computer)?

    EDIT:
    So on hovering the logo, I just want logoGlow to fade in, and when leaving the image I want logoGlow to fade out. Did that work when you tried it?

    EDIT2:
    I put all the content online: http://adlivro.net84.net/index.html It still doesn't work :S
    Last edited by vbsXperts; 04-01-2012 at 04:38 PM. Reason: forgot to add information

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles