Question

当鼠标在div #circle上时，我希望#intro中的文字消失，当鼠标在div #circle上时，它会回来，我让它工作但是它会消失回到充满活力的时代......帮助？而且即使我有位置，盒子也会移动：固定; ，即使文字消失，我希望盒子保持原位。

＆＃13;

$(document).ready(function() {
   $('#circle').hover(function() {
      $('#intro').hide([2]);
      $('#intro').show([2]);

    });
});

＆＃13;

html, body {
  padding: 0 autp;
  margin: 0 auto;
}



#circle {
  height: 150px;
  width: 150px;
  background-color: blue;
  border-radius: 25%;
  transition: all 1s ease-in-out;
  border: black 1px solid;
  position:relative; /*gotta put it here too to start it off*/
  top:35%;
  left:35%;
  overflow: hidden;
}
#intro {
  text-align: center;
  margin-top: 75px;
  overflow: hidden;
  font-family: 'Indie Flower', cursive;
  font-size: 50px;
}

body {
  background-color: #cccccc;
}

#circle:hover {
  border: black 1px solid;
  background-color: red;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  transition: 1.5s;
  -webkit-animation-name: cruise;
  -webkit-animation-duration: 60s;
  animation-name: cruise;
  animation-duration: 50s;
  position:relative;
  top:50%;
  left:50%;
  transition: all 1s linear;
  overflow: hidden;
}

#arena {
  border: 5px dashed grey;
  margin: 0 auto;
  width: 550px;
  height: 550px;
  margin-top: 150px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

 @keyframes cruise {
    0%    {left:35%; top:35%;}
    5%    {left:40%; top:40%;}
    10%   {left:45%; top:45%;}
    15%   {left:50%; top:43%;}
    20%   {left:57%; top:50%;}
    25%   {left:67%; top:40%;}
    30%   {left:70%; top:27%;}
    35%   {left:55%; top:35%;}
    40%   {left:35%; top:67%;}
    45%   {left:15%; top:40%;}
    50%   {left:40%; top:65%;}
    55%   {left:50%; top:25%;}
    60%   {left:82%; top:65%;}
    65%   {left:26%; top:15%;}
    70%   {left:69%; top:70%;}
    75%   {left:85%; top:15%;}
    80%   {left:36%; top:78%;}
    85%   {left:65%; top:41%;}
    90%   {left:85%; top:26%;}
    95%   {left:58%; top:78%;}
    100%  {left:35%; top:35%;}
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
        <title>
            AtomTest
        </title>
        <link rel="stylesheet" style="text/css" href="style.css">
        <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
  </head>
  <body>
        <script src="\html/jquery/jquery-2.2.0.js"></script>
        <script src="script.js"></script>




        </script>

      <h1 id="intro">
        <ins>HÅLL MUSEN PÅ DEN BLÅA FYRKANTEN</ins>
      </h1>
    <div id="arena">
        <div id="circle">

        </div>
    </div>

  </body>
</html>

＆＃13;

Answer 1

您在File.open('person_job.csv', 'w') do |f| f.write(table.to_csv) end上的同一事件上声明了hide()和show()。相反，您需要在mouseenter上声明show()。

mouseleave

工作示例：http://jsfiddle.net/DinoMyte/X6jzs/23/

.hide（）和.show（）重复次数过多

1 个答案: