JQuery .hover 在不悬停时激活-6ren

JQuery .hover 在不悬停时激活

转载作者：行者123 更新时间：2023-11-28 06:34:13

25

4

所以这是我目前的代码，我遇到的问题是:为什么 $('#intro').fadeOut 即使我没有悬停在 $( '竞技场')。悬停？我还有其他问题导致代码无法正常工作吗？

$(document).ready(function() {
  $('#arena').hover(); {
  	$('#intro').fadeOut('slow'); {
      

    }
  }
});

html, body {
  padding: 0 autp;
  margin: 0 auto;
}



#cirkle {
  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%;
}
#intro {
  text-align: center;
  margin-top: 75px;
  overflow: hidden;
  font-family: 'Indie Flower', cursive;
  font-size: 50px;
}

body {
  background-color: #cccccc;
}

#cirkle: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;
}

#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%;}
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>
            Test
        </title>
      
 
        <script src="script.js"> </script>
  
  <body>
      <h1 id="intro">
        <ins>HÅLL MUSEN PÅ DEN BLÅA FYRKANTEN</ins>
      </h1>
    <div id="arena">
        <div id="cirkle">

        </div>
    </div>

  </body>
</html>

最佳答案

您有几个语法错误。您需要提供一个函数作为参数来定义悬停行为。

像这样调整你的代码:

$(document).ready(function() {
   $('#arena').hover(function() {
      $('#intro').fadeOut('slow');
   });
});

关于JQuery .hover 在不悬停时激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34793346/

25

4

0

文章推荐： c++ - GetTempPath 显示与当前不同的用户

文章推荐： ios - 排序数组导致错误的数据显示到单元格中

文章推荐： c++ - Libtiff 的 TIFFOpenW 抛出异常

文章推荐： ios - 根据百分比用颜色填充 UIView

html - 保留 :hover effect when hovering over another :hover
正如您在此 JSFiddle 中看到的那样，当您将鼠标悬停在 text-content 上时； opacity img 和 img 类返回到正常状态，我想保持 :hover 来自 img 和 img
css - :hover in Safari don't "hover-out"
在 Safari 上，CSS :hover 在具有固定位置的子级在父级外部打开然后关闭后仍然处于事件状态。鼠标重新进入悬停区域后，它再次起作用。演示:http://jsfiddle.net/HSC
jquery - .hover(...) 等等。 ("hover"...) 行为不同
使用 JQuery，当元素处于悬停状态时，我尝试链接几个函数。我通常会使用.hover事件函数，但在阅读了一些教程后，我使用 .on 阅读了该函数更好，因为您可以使用一个事件处理程序来监视文档中的所
html - :hover and :hover:before not working properly
我已经解决了很多具有相似标题的已解决问题，但我尝试的似乎都没有用。我希望将 ava.png 图像重定向到另一个页面，但是在悬停时我想要一个 :before 图像(ava_background_hoo
css - 如何申请子:hover but not parent:hover
使用以下 html，当我将鼠标悬停在子对象上时，父对象的背景为绿色。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实需要绿色背景。 CSS3 很好。 .parent { padding:
css - 覆盖父级 :hover on child :hover
我有两个默认设置为隐藏的子元素。 .child1, .child2{ visibility:hidden; } #parent :hover .child1, #parent:hover .child
css - :hover and leaving :hover? 之间的转换
所以我试图让我的分页在悬停时平滑地滑动，然后在鼠标离开元素后滑回其原始位置。我已经让它在悬停时滑动，但是当鼠标离开按钮时，它只是快速返回而不是过渡。有人可以帮我解决这个问题吗？这是我的代码。 #pa
javascript - 触发一个 :hover event by hovering on an other
我有一个 jQuery 问题；我想通过将鼠标悬停在另一个元素上来触发元素上的 :hover 事件，控制台显示错误: Uncaught RangeError: Maximum call stack si
css - .hover 和 :hover? 有什么区别
我正在挖掘某人编写的一些 css 代码，我发现了这个: li.hover, li:hover { } .hover 和 :hover 有区别吗？也许某些浏览器对 hover 的行为不同？! 最佳答案
css - 如何申请子:hover but not parent:hover
使用以下 html，当我将鼠标悬停在子对象上时，父对象的背景为绿色。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实需要绿色背景。 CSS3 很好。 .parent { padding:
css - .class a :hover vs . class:hover a
找不到我一直想知道的问题的答案。 .class2 a:hover {} 和 .class2:hover a {} 有区别吗？还是偏爱其中之一？我一直在使用 .class2 a:hover {} 来改
jquery-hover - 如何防止 jQuery .hover 函数同时影响所有图像？
我不确定标题是否足够好地解释它，但我试图保持简短! 因此，我在页面上散布了许多图像，并为它们创建了一个灯箱画廊(.cboxElement 是调用它的类)。我想添加的是对受灯箱影响的每个图像的悬停效果，
jquery - 我需要在图像 :hover on hover 顶部显示一个 div
.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFE
css - :hover or #menubar:hover not working for header
我无法让 a:hover 元素正常工作。我是业余爱好者，所以请放轻松...我也尝试过使用#menubar:hover，但这似乎也不起作用。此代码将进入另一个程序的 header 。我进入这个的唯一原
hover - 边界半径和 :hover state area issue
我到处寻找这个问题的答案，但我找不到任何相关信息。谁能告诉我我们是否可以影响接收元素悬停边界半径属性的区域。以便在击中真实区域查看元素后发生颜色等变化的效果？不要阻止在 DOM 中作为正方形物理存在？
css - 选择 :HOVER, 将样式应用于 :HOVER 元素的子元素不起作用
谁能看出我在这里做错了什么？我在中有一些文本元素我想要 text-decoration:none在什么时候悬停在。请参阅下面的 HTML，我认为它应该可以工作，但是当我将鼠标悬停在上时文字
"leaving hover"时的 css hover 伪类问题
我正在尝试创建一个可缩放的 map ，当鼠标悬停在 map 图像上时它会工作，类似于 map 在 Flickr 上的工作方式(请参阅右侧栏上的 map - http://www.flickr.com/
CSS Hover 在 tr :hover 上禁用
我有一张 table ，我有一个用于 tr:hover 效果的全局 css 代码。但有时我不想在我的 table 上使用这种悬停效果。请查看代码并告诉我如何不对该表运行效果。 JSFIDDLE .这里
html - 为什么是:hover slower than td:hover?
我重新开发了我们的一个页面，我注意到它在上使用悬停元素，尽管点击事件是针对的标签。所以我将其更改为悬停在上标签。当鼠标快速移动到每个元素上时，需要相当长的时间才能 catch 。我想没有人
jquery - :hover stops after hovering autocomplete field
我从来都不是 javascript 下拉菜单的忠实粉丝，所以当我可以使用 CSS 设计下拉菜单时，我会的。但是现在我遇到了一个小问题。我有一个登录按钮和一个小的登录表单模块，它是按钮的兄弟。当我将鼠

首页

博学

6Ren·AI

商城

JQuery .hover 在不悬停时激活