Link to home
Create AccountLog in
Avatar of hankknight
hankknightFlag for Canada

asked on

jQuery: select <strong> inside this only

When you hover over a word, I want one word to be displayed under the word you hover over.

The problem with my code is that when you hover over a word, all additional words are shown below all words.

I only want  $("strong").fadeIn() to be applied to the item hovered over.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){

		$('p').mouseover(function() {
		    $("strong").fadeIn();
		});


});

/* ]]> */
</script>
<style type="text/css">


strong {
display: none;
}

</style>

</head>
<body>

<h1>Put your mouse over a word.  One bold word should fade in below that word only.</h1>

<p>Hello <strong>World</strong></p>
<p>Foo <strong>Zooph</strong></p>
<p>Apples <strong>Oranges</strong></p>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Dushyant Sharma
Dushyant Sharma
Flag of India image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
SOLUTION
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.