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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    jQuery hover - add class to current (active) div element, not others

    Hello all,

    I'm currently working on a jQuery effect for a button on a website I'm developing and have run into a small issue that I can't figure out how to fix. I have written a short jQuery script to add a class to a div within the button element. It adds a hover class to an arrow next to the text for the link and removes it when you mouse out – pretty simple. However, if you look at this example you'll notice that when you hover over the first button, all the arrows in the following buttons are also activated, because it adds the css class to every element on the page with that class identifier.

    Here's a screenshot of the problem:



    How do I make the script add the class to only the current arrow in the div and not all the others on the page? Here's my html, css and jQuery:

    HTML

    Code:
    	        	<div class="end-lft"></div>
    	        	<a href="<?php echo BASE_URL; ?>doctors/" class="btn">Visit our Doctors page</a>
    	        	<div class="end-rght-h"></div><!-- This is the element that has a hover class applied when a user hovers over a.btn above -->
    CSS

    Code:
        .end-lft {
    	background: url('images/ui/page/btn-lft.jpg') no-repeat 0 0;
    	width: 4px;
    	height: 33px;
    	display: block;
    	float: left;
    	clear: left;
        }
    
        a.btn {
    	background: url('images/ui/page/btn-bg.jpg') repeat-x 0 0;
    	width: auto;
    	height: 33px;
    	padding: 6px 7px 0 7px;	
    	display: block;
    	float: left;
    	font-size: 0.9em;		
    	text-decoration: none !important;
        }
    
        .end-rght-h {
    	background: url('images/ui/page/btn-arrw-h.jpg') no-repeat 0 0;
    	width: 22px;
    	height: 33px;
    	display: block;	
    	float: left;
    	clear: right;
        }
    
        .end-rght-v {
    	background: url('images/ui/page/btn-arrw-v.jpg') no-repeat 0 0;
    	width: 22px;
    	height: 33px;
    	display: block;	
    	float: left;
    	clear: right;
        }
    jQuery

    Code:
        $(document).ready(function() {     
            $(".btn").hover(function(){     
            $('.end-rght-h, .end-rght-v').addClass("hvr");    
        },     
        function(){    
            $('.end-rght-h, .end-rght-v').removeClass("hvr");     
        });
        });

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Maybe something like
    Code:
        $(document).ready(function() {     
            $(".btn").hover(function(){     
            $('.end-rght-h, .end-rght-v',$(this).parent()).addClass("hvr");    
        },     
        function(){    
            $('.end-rght-h, .end-rght-v').removeClass("hvr");     
        });
        });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    taylortsantles (06-03-2011)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Thumbs up Thank you!!!

    Dude, you are awesome. Thank you so much for the answer. It worked perfectly. I'm new to jQuery and still trying to figure out the syntax. I was thinking of the same logic, just didn't know how to put it in code form. Thanks for the help!

    - Taylor


  •  

    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
    •