Member Avatar for benhowdle89

i have this jquery code:

$(document).ready(function(){
	//Hide the tooglebox when page load
	$(".visit").hide();
	$("#suppliers-table td").hover(function(){	
		$(".visit").show();
	});
});

for this html:

<table id="suppliers-table">
			                	<tr>
			                		<td><p class="suppliers-name">ASD</p><a class="visit" href="#">Visit Website</a></td>
			                		<td><p class="suppliers-name">ASD</p><a class="visit" href="#">Visit Website</a></td>
			                		<td><p class="suppliers-name">ASD</p><a class="visit" href="#">Visit Website</a></td>
			                		<td><p class="suppliers-name">ASD</p><a class="visit" href="#">Visit Website</a></td>
			                		<td><p class="suppliers-name">ASD</p><a class="visit" href="#">Visit Website</a></td>
			                	</tr>

What i need to happen is when they hover over a td for the hyperlink:"visit website" to appear and the go again when the hover off. And only appear for that td, not all of them

I know the jquery is wrong above but if someone can correct it that would be great

  • 1 Contributor
  • 1 Reply
  • 78 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by benhowdle89
Member Avatar for benhowdle89

Sorry didnt realise you could put two selectors in

$(document).ready(function(){
	//Hide the tooglebox when page load
	$(".visit").hide();
	$("#suppliers-table td").hover(function(){	
		$(".visit", this).toggle();
	});
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.