Short 8-2 Create a FAQs Rollover application In this exercise, you’ll write the
ID: 3870818 • Letter: S
Question
Short 8-2 Create a FAQs Rollover
application
In this exercise, you’ll write the jQuery code for an application that displays the
answer to a question in a list of questions when the user hovers the mouse over that
question. Estimated time: 10 to 15 minutes.
1.
Open the HTML and JavaScript files in this
folder:
exercises_shortch08 aqs_rollover
2.
Review the HTML to see that it includes an unordered list with list items that
consist of an h2 element
and a <p> element. The h2 element contains a question,
and the <p> element, which is hidden, contains the answer to the
question.
3.
Add jQuery code that runs when the user moves the mouse pointer into or out
of
a question in the list. When the mouse pointer
moves into the question, the
answer should be displayed. When the mouse pointer moves out of the question,
the answer should be
hidden.
css
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
padding: 20px;
width: 600px;
border: 3px solid blue;
}
h1, ul {
margin: 0;
padding: 0;
}
h2 {
font-size: 125%;
cursor: pointer;
}
ul {
list-style-type: none;
}
.hidden {
display: none;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q & A Rollovers</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="rollover.js"></script>
</head>
<body>
<main>
<h1>jQuery FAQs</h1>
<ul id="faq_rollovers">
<li><h2>What is jQuery?</h2>
<p class="hidden">jQuery is a library of the JavaScript functions
that you're most likely to need as you develop websites.</p>
</li>
<li><h2>Why is jQuery becoming so popular?</h2>
<p class="hidden">Three reasons: It's free; It lets you get more done
in less time; All of its functions are cross-browser compatible.</p>
</li>
<li><h2>Which is harder to learn: jQuery or JavaScript?</h2>
<p class="hidden">For most functions, jQuery is significantly easier to learn
and use than JavaScript. But remember that jQuery is JavaScript.</p>
</li>
</ul>
</main>
</body>
</html>
JS
$(document).ready(function() {
}); // end ready
Explanation / Answer
JQuery Function-
$(document).ready(function() {
$('h2').hover(function(){
$(this).siblings().css("display","block");
},function(){
$(this).siblings().css("display","none");
});
});
if you got any problem,then comment me
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.