When clicking to get a new quote, colors change for all the page, including the button. However, if the user keep the mouse on the button (hovering it), the color won’t change. Messing up the entire design.
Do you know how I could fix that?
$("#getQuote").html(function() {
$.getJSON(
"https://random-quote-generator.herokuapp.com/api/quotes/",
function(val) {
var ran = Math.floor(Math.random() * 80);
$(".cont").html(val[ran].quote);
$(".title").html("- " + val[ran].author);
}
);
});
$("#getQuote").on("click", function() {
$.getJSON(
"https://random-quote-generator.herokuapp.com/api/quotes/",
function(val) {
var ran = Math.floor(Math.random() * 80);
$(".cont").html(val[ran].quote);
$(".title").html("- " + val[ran].author);
}
);
});
// Twitter share button
$("#tweetIt").on("click", function() {
var quote = document.getElementById("result").innerText;
var author = document.getElementById("title").innerText;
var tweetUrl =
"https://twitter.com/share?text=" +
encodeURIComponent(quote + " " + author + " #quote") +
"&url=" +
"www.qod.com/";
window.open(tweetUrl);
});
$(document).ready(function() {
$("#getQuote").click(function() {
var col = Math.floor(Math.random() * 12);
var color = [
"#16a085",
"#27ae60",
"#2c3e50",
"#f39c12",
"#e74c3c",
"#9b59b6",
"#FB6964",
"#342224",
"#472E32",
"#BDBB99",
"#77B1A9",
"#73A857"
];
$(".twitter, #tweetIt")
.css({
background: color[col],
"border-radius": "3px"
})
.addClass("animated fadeIn 8000");
$("i, span, p, .quote")
.css("color", color[col])
.addClass("animated fadeIn");
$(".quote").hover(
function() {
$(this).css({
background: color[col],
"border-radius": "4px"
});
$(this).css("color", "white");
},
function() {
$(this).css("background-color", "white");
$(this).css("color", color[col]);
}
);
$("#tweetIt").hover(
function() {
$(this).css("color", "white");
$(this).css("transform", "scale(1.1,1.1)");
},
function() {
$(this).css("color", "white");
$(this).css("transform", "scale(1,1)");
}
);
setTimeout(function() {
$("i, span, p, background").removeClass("animated fadeIn");
}, 500);
});
});
.container {
margin-top: 200px;
}
.row {
height: auto;
}
.test4 {
position: relative;
bottom: 10;
right: 0;
}
.iconLeft {
float: right;
right: 16px;
font-size: 5em;
color: #555555;
}
.iconRight {
float: bottom right;
right: 16px;
font-size: 5em;
color: #555555;
}
.cont {
font-size: 2em;
color: #555555;
}
.title {
text-align: right;
font-size: 1.3em;
margin-top: 1em;
color: #555555;
}
.main {
display: flex;
justify-content: center;
}
.quote {
width: 300px;
border-radius: 3px;
margin-top: 20px;
font-size: 20px;
padding: px;
height: 60px;
line-height: 0px;
background: white;
color: #555555;
margin-bottom: 300px;
border: solid 2px;
}
.quote:hover {
background: #555555;
color: white;
border-radius: 4px;
}
.twitter {
float: left;
color: white;
}
.twitter:hover {
transform: scale(1.1, 1.1);
color: white;
}
button {
background-color: #555555;
font-size: 3em;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='row'>
<div class='col-sm-2 test2'>
<i class="fa fa-quote-left iconLeft"> </i>
</div>
<div class='col-sm-8 test3'>
<span class="cont" id="result" onclick="myFunction()"></span>
<p class="title" id="title"></p>
<div class="twitter">
<button id="tweetIt" class="btn fab fa-twitter" title="Tweet this quote!"> Tweet</button>
</div>
</div>
<div class='col-sm-2 test4'>
<i class="fa fa-quote-right iconRight"> </i>
</div>
</div>
</div>
<div class="row container-fluid main">
<button id="getQuote" class="quote btn btn-outline-secondary">New Quote</button>
</div>
5
Answers
Try last two line add in your code…
The reason why the hover effect appears to be broken after clicking is because the mouseover event is not fired. From a purist point of view, this behavior can be easily handled using some CSS: all you need to do is to create a custom
<style>
element whose text content is constantly updating for each color change. Basically what you want is:At the top of your file, you can create a custom
<style>
element with a certain ID, so you can easily select it later. We leave it empty for now:Instead of binding the
.hover()
event, you simply overwrite the text content of the custom<style>
element with the correct rules:See working CodePen: https://codepen.io/terrymun/pen/oqMjXB
There is still some issues with your code, especially when it comes to creating new
.hover()
bindings for each.click()
. This is not ideal because every time the user cycles through your quotes, new bindings are created. This will bog your app down very quickly.You just have to trigger
mouseleave
on click$(this).trigger('mouseleave');
here is a working codepen. Also function definition should be moved to the top in order to call/trigger the event.You will need to track somehow if the mouse is hovering the button and to make sure that if it is, you call
mouseleave
andmouseenter
, to trigger the event you are missing here. A solution is:On
click
… You redefine the hover handlers.So if the
mouseleave
did not occur yet… The color do not change.But you can force a
mouseleave
at the very beginning of theclick
handler… And since we know the mouse is supposed to be over the button, also force amouseenter
at the end of theclick
handler (after thehover
has been redefined).Here is your CodePen updated