单击后悬停不会重置

Question

单击以获取新报价时，整个页面的颜色都会发生变化，包括按钮。但是，如果用户将鼠标放在按钮上（悬停），颜色不会改变。搞砸了整个设计。

你知道我该如何解决这个问题吗？

$("#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>

Answer 1

点击后出现悬停效果的原因是没有触发mouseover事件。从纯粹的角度来看，这种行为可以使用一些 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);

您只需使用正确的规则覆盖自定义 <style> 元素的文本内容，而不是绑定 .hover() 事件：

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

您的代码仍然存在一些问题，尤其是在为每个 .click() 创建新的 .hover() 绑定时。这并不理想，因为每次用户循环浏览您的报价时，都会创建新的绑定。这会很快让您的应用陷入困境。

Answer 2

在click...您重新定义悬停处理程序。

所以如果mouseleave 还没有出现...颜色不会改变。

但是您可以在 click 处理程序的开头强制使用 mouseleave... 因为我们知道鼠标应该在按钮上方，所以也可以在 @ 的末尾强制使用 mouseenter 987654327@ 处理程序（在 hover 被重新定义之后）。

$("#getQuote").click(function() {
   $(this).trigger("mouseleave");          // Force mouseleave

   //... you whole code is unchanged

   $(this).trigger("mouseenter");          // Force mouseenter
});

这是你的CodePen updated

Answer 3

您只需在点击时触发mouseleave $(this).trigger('mouseleave'); here 是一个有效的代码笔。函数定义也应该移到顶部以便调用/触发事件。

Answer 4

尝试在代码中添加最后两行...

$(".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").css({ background: color[col], "border-radius": "4px" });
$(".quote").css("color", "white");

Answer 5

您需要以某种方式跟踪鼠标是否悬停在按钮上，并确保如果是，则调用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);
  });
});