title: hover with fixed random color in the same div
body: <p>I use JQuery to have a hover with random colors, with this code I can have several colors in the same div if I move the mouse.</p>
  <p>My goal is to have only one fixed color in the same div each time, if the mouse doesn't leave the div the color must stay the same ?</p>
  <p>Do you have an idea please ?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function(){
    
    $('.box').mouseover(function(){
          var back = ["#B98B91","#A5465F","#A31E64","#F4C181","#F28C54","#F39131"];
          var color = back[Math.floor(Math.random() * back.length)];
          $('.box').css("background-color", color);
    });
    
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {border:solid;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="box"&gt;
  &lt;p&gt;BLA BLA BLA&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>