jQuery: hidden div to be displayed on hover

JavaScript
1

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:

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

If you can use an “id”, that would be better. like so:

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

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

Well, without seeing any other identifier or code, I suspect you have simply:


<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

Well, there’s 20 x below (probably more divs than needed :))

<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

I solved it by help on irc. :slight_smile:

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

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

After seeing your html, I would have advised the same.

8

Being unclear is the root of all evil, huh? :slight_smile:

Thanks for helping at least.