Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2012
    Location
    Colorado SPrings
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Wordpress post img hover effect.

    I am trying to get each post to hover individually not all together. This is what I have so far. How do I get it to select each individual post not all of them?
    source = http://www.ScottReinmuth.com/portfolio
    Code:
    $(document).ready(function(){
    	$(".portfolio-thumb").mouseenter(function(){
    		$(".portfolio-hover").fadeIn("slow");
    	});
    	$(".portfolio-thumb").mouseleave(function(){
    		$(".portfolio-hover").fadeOut("slow");
    	});
    });

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript" src="http://www.scottreinmuth.com/wp-content/themes/scottreinmuthcom/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
       var $els = $(".portfolio-hover");
       $els.each(function(){
          $(this).mouseenter(function(){ $(this).fadeIn("slow");  });
          $(this).mouseleave(function(){ $(this).fadeOut("slow");  });
       });
     });
    </script>
    </head>
    
    <body>
    <img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    <img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    May 2012
    Location
    Colorado SPrings
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript" src="http://www.scottreinmuth.com/wp-content/themes/scottreinmuthcom/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
       var $els = $(".portfolio-hover");
       $els.each(function(){
          $(this).mouseenter(function(){ $(this).fadeIn("slow");  });
          $(this).mouseleave(function(){ $(this).fadeOut("slow");  });
       });
     });
    </script>
    </head>
    
    <body>
    <img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    <img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    </body>
    
    </html>
    I understand what is going on here but for some reason it is not working. Any suggestions? Now the title wont even show. I think I may have something screwed up on my site but I'm not sure. The slide effects never work either on my site for some reason. Maybe I have an old jQuery version?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    You will have to show your actual code instead of just re-posting Vic's code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •