Menu
Community /Pin to ProfileBookmark
@cootheadSep 20.2020 — #Hi there Furthark,
and a warm welcome to these forums. ;)
As@Sempervivum has pointed out no
[i]JavaScript[/i] is needed.
Here is another possible solution that
takes responsiveness into consideration...
[i]coothead[/i]
Sticky-Glitchy MouseOver Issue
New member.
**Issue
**Question
[code]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Sticky-Glitchy MouseOver Issue</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
h1, h2, h3, h4, h5, h6, p {
text-align: center;
font-family: “Raleway”;
}
.top {
padding: 10px;
text-align: center;
background-color: #f1f1f1;
color: black;
font-size: 20px;
font-family: “Raleway”;
display: block
}
.quiz {
border-radius: 8px;
margin: 9px;
float: left;
width: 24%;
padding: 15px;
height: 250px;
background-color: #f9f9f9;
display: inline-block;
text-align: center;
font-family: “Libre+Baskerville”;
font-size: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.buttonrow {
float: left;
width: 25%;
padding: 10px;
height: auto;
background-color: #f1f1f1;
display: inline-block
}
.row {
column-gap: 20px;
}
.row:after {
content: “”;
display: table;
clear: both;
}
.button {
position: relative;
font-family: “Raleway”;
font-weight: bold;
background-color: #000;
border-radius: 5px;
border: none;
color: white;
padding: 12px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
}
.button1:hover {
box-shadow: 0 10px 14px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<div class=”top”>
<h2>Quiz</h2>
</div>
<div class=”row”>
<div class=”quiz”>
<div onmouseover=”qone_Over(this)” onmouseout=”qone_Out(this)”><strong>Question One</strong> <br><br> The Spanish Flu was a Pandemic.<br><br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer</div>
</div>
<div class=”quiz”>
<div onmouseover=”qtwo_Over(this)” onmouseout=”qtwo_Out(this)”><strong>Question Two</strong> <br><br> The term – A Slippery Slope – is a general fallacy of logic that plays no role in Denialism.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer</div>
</div>
<div class=”quiz”>
<div onmouseover=”qthree_Over(this)” onmouseout=”qthree_Out(this)”><strong>Question Three</strong> <br><br> COVID19 is the 19th version of the Coronavirus Disease.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer</div>
</div>
<div class=”quiz”>
<div onmouseover=”qfour_Over(this)” onmouseout=”qfour_Out(this)”><strong>Question Four</strong> <br><br> Washing your hands thoroughly for 20 to 30 seconds with regular soap, helps slow the spread of COVID. <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer</div>
</div>
</div>
<div class=”row”>
<div class=”buttonrow”>
<h2><a href=”” class=”button”>Read More</a></h2>
</div>
<div class=”buttonrow”>
<h2><a href=”” class=”button”>Read More</a></h2>
</div>
<div class=”buttonrow”>
<h2><a href=”” class=”button”>Read More</a></h2>
</div>
<div class=”buttonrow”>
<h2><a href=”” class=”button”>Read More</a></h2>
</div>
</div>
<script>
// MouseOver Message One Show
function qone_Over(obj_ov1) {
obj_ov1.innerHTML = “<strong>True</strong> – <i>The Spanish flu pandemic of 1918, the deadliest in history, infected an estimated 500 million people worldwide—about one-third of the planet’s population—and killed an estimated 20 million to 50 million victims, including some 675,000 Americans.</i>”
}
// MouseOver Message One Hide
function qone_Out(obj_ot1) {
obj_ot1.innerHTML = “<strong>Question One</strong> <br><br> The Spanish Flu was a Pandemic.<br><br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer”
}
// MouseOver Message Two Show
function qtwo_Over(obj_ov2) {
obj_ov2.innerHTML = “<strong>False</strong> – <i>Denialism employs five basic approaches: conspiracy, selectivity (cherry-picking), fake experts, impossible expectations, and general fallacies of logic.</i>”
}
// MouseOver Message Two Hide
function qtwo_Out(obj_ot2) {
obj_ot2.innerHTML = “<strong>Question Two</strong> <br><br> The term – A Slippery Slope – is a general fallacy of logic that plays no role in Denialism.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer”
}
// MouseOver Message Three Show
function qthree_Over(obj_ov3) {
obj_ov3.innerHTML = “<strong>False</strong> – <i>COVID19 means that this string of the Coranvirus Disease emerged or was discovered in the year 2019.</i>”
}
// MouseOver Message Three Hide
function qthree_Out(obj_ot3) {
obj_ot3.innerHTML = “<strong>Question Three</strong> <br><br> COVID19 is the 19th version of the Coronavirus Disease.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer”
}
// MouseOver Message Four Show
function qfour_Over(obj_ov4) {
obj_ov4.innerHTML = “<strong>True</strong> – <i>Hygiene, regardless of pandemics-epidemics and what not – having good hygiene practice is an essential part of maintaining a healthy lifestyle and killing off illness causing bacteria reducing the risk for diseases.</i>”
}
// MouseOver Message Four Hide
function qfour_Out(obj_ot4) {
obj_ot4.innerHTML = “<strong>Question Four</strong> <br><br> Washing your hands thoroughly for 20 to 30 seconds with regular soap, helps slow the spread of COVID. <br><br> <strong>True or False?</strong> <br><br> Mouse Over – To Reveal The Answer”
}
</script>
</body>
</html>
Sign in
to post a comment2 Comments(s) ↴
0
@cootheadSep 20.2020 — #Hi there Furthark,and a warm welcome to these forums. ;)
As
[i]JavaScript[/i] is needed.
Here is another possible solution that
takes responsiveness into consideration...
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Sticky-Glitchy MouseOver Issue</title>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Raleway&display=swap" rel="stylesheet" media="screen">
<style>
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f1f1f1;
}
h1, h2, h3, h4, h5, h6 {
font-family: Raleway, sans-serif;
text-align: center;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
#row {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 1em ;
}
.quiz {
position: relative;
width: 24%;
margin-bottom: 1em;
border-radius: 0.5em;
background-color: #f9f9f9;
font-family: 'Libre Baskerville', serif;
font-size: 1em;
text-align: center;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ),
0 0.5em 1.25em 0 rgba( 0, 0, 0, 0.19);
overflow: hidden;
cursor: pointer;
}
.quiz > div {
display: flex;
width: 200%;
margin-bottom: 2.5em;
transition: 0.5s ease-in-out;
}
.quiz:hover > div {
margin-left:-100%;
}
.quiz > div div {
width: 100%;
padding: 1em;
text-align: left;
}
.quiz a {
position: absolute;
left: 50% ;
bottom: 0;
transform: translate(-50% ,-50% );
padding: 0.7em 1.7em;
border-radius: 0.3em;
background-color: #000;
font-family: Raleway, sans-serif;
font-size: 0.8em;
font-weight: bold;
color: #fff;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: 0.4s ease-in-out;
}
.quiz a:hover {
box-shadow: 0 0.6em 0.8em 0 rgba( 0,0,0,0.24 ),
0 1em 3em 0 rgba( 0,0,0,0.19 );
}
@media ( max-width: 50em ) {
.quiz {
width: 48%;
}
}
@media ( max-width: 30em ) {
.quiz {
width: 98%;
}
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div id="row">
<div class="quiz">
<div>
<div>
<h2>Question One</h2>
<p>The Spanish Flu was a Pandemic.</p>
<h2>True or False?</h2>
Mouse Over - To Reveal The Answer
</div>
<div>
<h2>True</h2>
<i>
The Spanish flu pandemic of 1918, the deadliest in history, infected an estimated 500 million
people worldwide - about one-third of the planet's population - and killed an estimated 20
million to 50 million victims, including some 675,000 Americans.
</i>
</div>
</div>
<a href="#">Read More</a>
<!-- .quiz --></div>
<div class="quiz">
<div>
<div>
<h2>Question Two</h2>
<p>The term - A Slippery Slope - is a general fallacy of logic that plays no role in Denialism.</p>
<h2>True or False?</h2>
Mouse Over - To Reveal The Answer
</div>
<div>
<h2>False</h2>
<i>
Denialism employs five basic approaches: conspiracy, selectivity (cherry-picking), fake experts,
impossible expectations, and general fallacies of logic.
</i>
</div>
</div>
<a href="#">Read More</a>
<!-- .quiz --></div>
<div class="quiz">
<div>
<div>
<h2>Question Three</h2>
<p>COVID19 is the 19th version of the Coronavirus Disease.</p>
<h2>True or False?</h2>
Mouse Over - To Reveal The Answer
</div>
<div>
<h2>False</h2>
<i>COVID19 means that this string of the Coronavirus Disease emerged or was discovered in the year 2019.</i>
</div>
</div>
<a href="#">Read More</a>
<!-- .quiz --></div>
<div class="quiz">
<div>
<div>
<h2>Question Four</h2>
<p>Washing your hands thoroughly for 20 to 30 seconds with regular soap, helps slow the spread of COVID.</p>
<h2>True or False?</h2>
Mouse Over - To Reveal The Answer
</div>
<div>
<h2>True</h2>
<i>
Hygiene, regardless of pandemics-epidemics and what not - having good hygiene practice is an essential part
of maintaining a healthy lifestyle and killing off illness causing bacteria reducing the risk for diseases.
</i>
</div>
</div>
<a href="#">Read More</a>
<!-- .quiz --></div>
<!-- .row --></div>
</body>
</html>
[i]coothead[/i]