SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb jQuery: hidden div to be displayed on hover

    Hi all,

    I've made a little short jQuery code where I hide a div, which should be displayed upon hover over another div. The problem is that since it's a class, it happens for all other hidden divs. I guess I should use "this" somewhere? So it only affect the div I'm currently hovering, but I'm not sure. Maybe it's harder than that?

    This is the simple JavaScript:

    Code JavaScript:
    jQuery(document).ready(function() {
    	jQuery('.lid').hide();
    });
    jQuery(document).ready(function() {
    	jQuery('.box, .box-1').hover(function() {
    		jQuery('.lid').show();
    		},
    	function() {
    		jQuery('.lid').hide();
    		});
    });

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you can use an "id", that would be better. like so:

    Code JavaScript:
    $('#lid').hide();
    jQuery('#box').hover(function() {
    	$('#lid').toggle();
    });

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, but there are multiple lid divs. So I can't really use and id for it. I could perhaps give them an ID generated from the post id, but that would mean at least 9 different js functions. Seems a bit unnecessary, but maybe it's too complicated doing it another way.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, without seeing any other identifier or code, I suspect you have simply:
    HTML Code:
    <div class="box">box</div>
    <div class="box">box</div>
    
    <div class="lid">lid</div>
    <div class="lid">lid</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
    	$('.lid').hide();
    	jQuery('.box').hover(function() {
    		$('.lid').toggle();
    	});
    </script>
    So, something more is needed...

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, there's 20 x below (probably more divs than needed )

    Code HTML4Strict:
    <div class="box">
    			<div class="box-title"> 
    				<a href="http://localhost/">Test</a>
    			</div>
    			<div class="lid">
    				<h2><a href="http://localhost/">Test</a></h2>
    				<p><a href="http://localhost/"><p>Test</p>
    </a></p>
    			</div>
    			<div class="mini"><a class="image" href="http://localhost/" title="Test">
    			<img width="200" height="200" src="http://localhost/test.jpg" alt="Test" />	</a>
    			</div>
     
    			</div>

  6. #6
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved it by help on irc.

    If anyone is curious, this is how (where the .find action is the new addition) :

    Code JavaScript:
    jQuery(document).ready(function() {
    	jQuery('.lid').hide();
    });
    jQuery(document).ready(function() {
    	jQuery('.box, .box-1').hover(function() {
    		jQuery(this).find('.lid').show();
    		},
    	function() {
    		jQuery('.lid').hide();
    		});
    });

  7. #7
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    After seeing your html, I would have advised the same.

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    After seeing your html, I would have advised the same.
    Being unclear is the root of all evil, huh?

    Thanks for helping at least.


Bookmarks

Posting Permissions

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