Add JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names. Code for index.html:
SQL
SQL stands for Structured Query Language, is a form of communication that uses queries structured in a specific format to store, manage & retrieve data from a relational database.
Queries
A query is a type of computer programming language that is used to retrieve data from a database. Databases are useful in a variety of ways. They enable the retrieval of records or parts of records, as well as the performance of various calculations prior to displaying the results. A search query is one type of query that many people perform several times per day. A search query is executed every time you use a search engine to find something. When you press the Enter key, the keywords are sent to the search engine, where they are processed by an algorithm that retrieves related results from the search index. Your query's results are displayed on a search engine results page, or SER.
Add JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names.
Code for index.html:
<!DOCTYPE html>
<html>
<head>
<title>Discussion 12</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header><h1>Custom Computers</h1></header>
<section>
<h2>Our custom models</h2>
<p>Our computer models are built using high-performance hardware</p>
<div class="computer">
<div>The standard model</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,
sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum
metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris
massa justo, dignissim eget eleifend sit amet, condimentum.
</p>
</div>
<div class="computer">
<div>The casual gaming model</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,
sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum
metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris
massa justo, dignissim eget eleifend sit amet, condimentum.
</p>
</div>
<div class="computer">
<div>The high-end gaming model</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,
sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum
metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris
massa justo, dignissim eget eleifend sit amet, condimentum.
</p>
</div>
<div id="about">
<h2>About us</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus
velit id massa ullamcorper porta. Nulla ante mi, congue id ante ac,
tempus convallis turpis. Vivamus consequat sed velit a tempor. In
pellentesque massa at efficitur sagittis. Aenean vestibulum tincidunt
varius. Aliquam erat volutpat. Fusce lacinia mauris eget diam elementum
iaculis. Vivamus nec mauris eu odio ultrices iaculis nec eget turpis.
Praesent lorem dolor, rhoncus eu congue nec, semper non arcu.
</p>
</div>
</section>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Code for style.cc:
* {
font-family: sans-serif;
margin: 0;
padding: 0;
}
body {
width: 900px;
height: auto;
margin: 20px auto;
background-color: rgba(50, 50, 50, 1);
box-shadow: 0px 20px 40px #000000;
}
header {
height: 90px;
background-color: rgba(41, 63, 80, 1);
font-size: 1.5em;
color: white;
text-align: center;
}
header h1 {
padding-top: 14px;
}
section {
padding: 20px;
background-color: rgba(127, 143, 155, 1);
}
section > * {
text-align: center;
}
.computer {
padding-top: 40px;
}
.computer div {
margin: 0px auto;
width: 600px;
font-size: 1.4em;
color: white;
background-color: rgba(41, 63, 80, 1);
}
.computer p {
margin: 0px auto;
width: 600px;
background-color: rgba(50, 50, 50, .5);
display: none;
color: white;
}
#about {
margin-top: 40px;
}
#about p {
text-align: left;
Make a file called script.js but do not worry about adding the associated <script> tag to index.htm. index.htm already contains the necessary <script> tags to access your JavaScript file, as well as a <script> that links to a JQuery CDN. You do not have to edit any files besides the script.js file.
When the user hovers over one of the computer model names, the associated description should slide downward from the model name. Once the user stops hovering over the model name, the description should slide back up toward the model name and disappear again. You should use the slideDown() and slideUp() effects for this assignment.
Step by step
Solved in 3 steps
