点击获取新报价时,所有页面的颜色都会发生变化,包括按钮。但是,如果用户将鼠标放在按钮上(将鼠标悬停在按钮上),则颜色不会发生变化。弄乱了整个设计。
你知道我怎么解决这个问题吗?
$("#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>
&#13;
答案 0 :(得分:1)
点击后悬停效果似乎被破坏的原因是因为未触发鼠标悬停事件。从纯粹主义的角度来看,可以使用一些CSS轻松处理此行为:您需要做的就是创建一个自定义<style>
元素,其文本内容会针对每个颜色更改不断更新。基本上你想要的是:
.quote {
background-color: #fff;
color: <<customColor>>;
}
.quote:hover {
background-color: <<customColor>>;
color: #fff;
}
在文件顶部,您可以创建具有特定ID的自定义<style>
元素,以便日后轻松选择。我们暂时把它留空:
var style = document.createElement("style");
style.id = 'customQuoteHover';
document.getElementsByTagName("head")[0].appendChild(style);
您只需使用正确的规则覆盖自定义.hover()
元素的文本内容,而不是绑定<style>
事件:
var css = ".quote { background-color: #fff; color: "+color[col]+"; } .quote:hover { background-color: "+color[col]+"; color: #fff; }";
var styleElent = document.getElementById('customQuoteHover');
while (styleElent.hasChildNodes()) {
styleElent.removeChild(styleElent.lastChild);
}
styleElent.appendChild(document.createTextNode(css));
请参阅CodePen:https://codepen.io/terrymun/pen/oqMjXB
您的代码仍然存在一些问题,尤其是在为每个.hover()
创建新的.click()
绑定时。这并不理想,因为每次用户循环显示引号时,都会创建新的绑定。这会让你的应用很快陷入困境。
答案 1 :(得分:1)
您只需在点击mouseleave
here上触发$(this).trigger('mouseleave');
即可使用。此外,函数定义应移至顶部以调用/触发事件。
答案 2 :(得分:1)
在click
上...您重新定义了悬停处理程序。
因此,如果mouseleave
尚未发生......颜色不会改变。
但你可以在mouseleave
处理程序的最开始强制click
...因为我们知道鼠标应该在按钮上方,所以也强制mouseenter
在click
处理程序的末尾(在重新定义hover
之后)。
$("#getQuote").click(function() {
$(this).trigger("mouseleave"); // Force mouseleave
//... you whole code is unchanged
$(this).trigger("mouseenter"); // Force mouseenter
});
这是您的CodePen updated
答案 3 :(得分:0)
在代码中尝试最后两行添加...
df = df.ge(10).mul(100)
答案 4 :(得分:0)
如果鼠标悬停在按钮上,您需要以某种方式进行跟踪,并确保如果是,请拨打mouseleave
和mouseenter
来触发此处缺少的事件。解决方案是:
$("#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);
});
var isInside = false;
$(document).ready(function() {
$("#getQuote").mouseenter(function() {
isInside = true;
});
$("#getQuote").mouseleave(function() {
isInside = false;
});
$("#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(() => {
$("i, span, p, background").removeClass("animated fadeIn");
if (isInside) {
$(this).mouseleave().mouseenter();
}
}, 500);
});
});