相关疑难解决方法(0)

我一直使用这个mouseover事件,但在阅读我发现的jQuery文档时mouseenter.它们似乎完全相同.

这两者之间是否存在差异？如果是,我应该何时使用它们？
(也适用于mouseoutvs mouseleave).

jQuery的mouseout()和mouseleave()有什么区别？

我有一个div,我想在用户连续徘徊他的鼠标3秒后才开始一个事件.我的代码不能很好地工作,因为它在悬停后立即触发并且不会"等待".

码:

$(".inner_pic").mouseenter(function () {
    setTimeout(function () {
        alert('testing');
    }, 3000);
}).mouseleave(function () {
    alert('finish');
});  

我正在玩AngularJS鼠标事件并遇到了问题.我知道MouseEnter事件在鼠标进入元素的容器时触发,并且在为所有子元素触发MouseOver之后触发.感谢这个动画可视化鼠标事件

但事实证明,在我的情况下,MouseEnter事件永远不会被触发.我正在开发Angular PhoneCat应用程序(步骤10)并做了以下修改:

1. Controllers.js:添加了记录鼠标事件的方法
2. phone-details.html:添加了ng-mouseenter和ng-mouseleave处理程序

    $scope.logMouseEvent = function() {
        switch (event.type) {
          case "mouseenter":
            console.log("Hey Mouse Entered");
            break;

          case "mouseleave":
            console.log("Mouse Gone");
            break;

          default:
            console.log(event.type);
            break;
        }

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-Click="setImage(img)" ng-mouseenter="logMouseEvent()" ng-mouseleave="logMouseEvent()">
  </li>
</ul>

结果:

仅记录鼠标悬停和mouseout事件

题:

这种行为是否发生,因为图像是ul元素,我们在子元素中移动鼠标？以及如何在图像上获得mouseenter事件？

谢谢

我正在建立一个网站，对于“关于”页面，我有一些图片，我想将它们的不透明度淡化为 0.5，然后让文本淡入顶部（如果有）。我的问题是，每当我将鼠标放在其中一张图像上时，它以及它上面的文本都会多次淡入和淡出。这是我遇到问题的代码部分的链接。仅当您将鼠标从包含的 div 外部移动到图像上时，才会出现此问题。

我的 jQuery：

$(document).ready(function() {
$('.fade').mouseenter(function() {
    $(this).fadeTo(150, 0.5);
    $(this).siblings().fadeIn(150);
}).mouseleave(function() {
    $(this).fadeTo(150, 1);
    $(this).siblings().fadeOut(150);
});
});

我注意到，当我删除 mouseenter 和 mouseleave 中的第二行代码时，它解决了问题。我尝试过鼠标悬停、悬停、stopPropogation，我已经查看了所有这些：

即使在 stopPropagation 之后，mouseenter 事件也会被调用两次

每次我在给定元素内移动鼠标时，鼠标悬停和鼠标离开都会触发

JS mouseenter 触发两次

JQuery mouseover 函数多次触发

如何阻止在 mouseenter/mouseleave 上多次触发切换事件？

jquery mouseover 事件触发两次

Jquery mouseenter() 与 mouseover()

并尝试了他们建议的一切，但到目前为止没有任何对我有用。有任何想法吗？

我有一个<img>,一旦盘旋,动画和淡化 <div>的图片的更大版本,以及文本和超链接.当鼠标移出时,<div>动画就会消失.这很好,只有我的悬停功能只适用于它<img>自己.只要a)<div>出现在<img>,或者b)一个鼠标离开<img>即可到达<div>,jQuery读取鼠标并动画<div>离开.如何重新编写我的jQuery以允许我解决这个问题？提前致谢 ...

以下是HTML的一部分:

<img runat="server" src="~/images/pc_blocks_navigation_spec1.gif" class="navigation_spec1" alt="" />
<div class="navigation_spec1_panel">
    <p>filler <a href="#">test</a></p>
</div>

...和jQuery ......

$('.navigation_spec1_panel').hide().css('opacity','0.0');
$('.navigation_spec1').hover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    }, function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});

(旁注释:在IE 6或7中,我的动画<div>不会出现在其他<div>s编码之上/ 之后.<div>无论z-index如何,它们都会出现在它们后面.建议？)

我在JS中的mouseover和mouseout事件中有这两个.它们用于检查我是否正在我的页面上的面板上盘旋.但问题是当我将鼠标悬停在面板上时它会触发(好),但是当我将鼠标悬停在该面板内的另一个元素上时,它会触发mouseout事件,然后当我移动到面板内的另一个部分时再次触发鼠标悬停事件.

我只希望mouseover和mouseout事件发射一次!一旦进入面板另一个离开它.有没有办法将on mouseover调用传播到div.panel中的所有子元素.似乎这会纠正它.

这是我的活动

 $(document).off("mouseover").on("mouseover", "div.panel", function() {
   var panelSpaceId = $(this).attr("data-spaceId");
   var marker = _.find(scope.markers, function(item) {
     return item.spaceId == panelSpaceId
   })
   google.maps.event.trigger(marker, "mouseover");
   console.log("over" + marker.spaceId);
 });

 $(document).off("mouseout").on("mouseout", "div.panel", function() {
   var panelSpaceId = $(this).attr("data-spaceId");
   var marker = _.find(scope.markers, function(item) {
     return item.spaceId == panelSpaceId
   })
   google.maps.event.trigger(marker, "mouseout");
   console.log("out" + marker.spaceId);
 });

我有以下代码,显示悬停图像时的一些文本.但是当光标在h1标签上移动时有一些问题,那时它正在闪烁.为什么会这样？

jQuery(function($) {
  $('.content1').mouseover(function() {
    $('.content').show();
  });
  $('.content').mouseout(function() {
    $('.content').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <img class="content1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" style="width:100%;position:relative">
  <div class="content" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; color: white; display: none; background: rgba(0, 0, 0, 0.901961);">
    <h1 style="color:white">hiiiiiiiiiiiiiiiiiii</h1>
  </div>

我正在尝试在我的网站上设置悬停功能.但它没有用.如果有人可以帮助我,将会非常有帮助.

<div class="text-result" *ngIf="Display('all')">
            <div *ngFor="let item of items$|async let i = index; trackBy: trackHero" class="result">
                <div class="title" (mouseover)="overTitle()" (mouseleave)="overTitle()">
                    <a href="{{item.link}}">{{item.title}}</a>
                </div>
                    <iframe [src]="myUrlList[i]"></iframe>
                <div class="link">
                    <p>{{item.link}}</p>
                </div>
                <div class="description">
                    <p>{{item.description}}</p>
                </div>
                <div>
                    {{item.pubDate|date:'fullDate'}}
                </div>
            </div>
        </div>

hoverBox: boolean = false;

// display content on hover
      // --------------------------------
      overTitle(){
        if(this.hoverBox == true){
          this.hoverBox = false;
        }
        else {
          this.hoverBox = true;
        }
      }
      trackHero(index, item){
        console.log("item", item);
        return item ? item.id : undefined;
      }
      // ---------------------------------

目前上面的代码看起来如何 -

当鼠标光标悬停在链接上时,我希望以这种方式拥有它,显示页面预览.当我删除光标时,不应显示页面预览.

我有一个<div>在我的网页上,当你将鼠标悬停在我的网页上时,我希望它的不透明度为1,但当鼠标没有悬停在它上面时,我希望它可以淡化为0.3的不透明度.我的问题是,当我将鼠标悬停在<div>它上面时,它会开始淡入淡出几次(而不仅仅是一次).我不确定这是不是为什么,但我怀疑是因为它检测到鼠标<div>在我设置为淡出的多个s内滚动.

这是我网页的一个非常简化的部分,用于说明我到目前为止所拥有的内容:

<div id="div1">
    <div id="div2" onmouseover="fadeElementTo('div1', 500, 1)" onmouseout="fadeElementTo('div1', 500, 0.3)">
        <div id="div3">
            <div id="div4">
            </div>
        </div>
    <button id="myButton" onclick="doACoolAnimation()" ></button>
    </div>
</div>

我的fadeElementTo()功能非常简单:

function fadeElementTo(eid, speed, opacity, callback) {
    $("#" + eid).fadeTo(speed, opacity, callback);
}

如果它是相关的,我也有一个按钮,div通过在单击按钮时向左或向右移动它来动画相同的按钮.

function doACoolAnimation() {
    var hiddenState = GLOBAL_VAR.hiddenState;

    // If the <div> is already hidden, make it visible
    if (hiddenState == null || hiddenState == 1) {
        GLOBAL_VAR.hiddenState = 0;
        $("#div1").animate({ …