Question

好的，让我先介绍一下这个问题是什么......

我们的客户有一个主页广告系列区域，其中包含9个唯一链接，当悬停在淡出底层默认背景图像时，前面的图像与悬停链接相关联，此时工具提示会在该链接上方触发描述和画廊的链接。在鼠标移出时，默认图像将重新出现在链接后面。

问题是当鼠标悬停在链接上然后将鼠标悬停在相应的工具提示上时，会触发该链接的mouseout事件。当鼠标悬停在工具提示上时，客户希望图像保留。这是我目前的代码：

$("a#building1").mouseover(function() {

    $("#main_image").fadeOut(1, function(){
      $("#main_image").load(function () { //avoiding blinking, wait until loaded
        $("#main_image").fadeIn();
        });

      $("#main_image").attr("src", "link-to-image-here");

    });
// each unique link has a class of building
$("a.building").mouseout(function() {

          $("#main_image").fadeOut(1 ,function(){
            $("#main_image").load(function () { //avoiding blinking, wait until loaded
              $("#main_image").fadeIn();    
              });
            $("#main_image").attr("src", "/images/banners/default.png");
          });      
    });

这是HTML标记

<a id="building1" class="building" href="#"></a>
      <div class="tooltip">
        <span class="event-title">Event title</span>
        <span class="location">Event location</span>  
        <a href="link-to-gallery" class="view-photos-btn">View Wedding Photos</a>
      </div>

我以为我可以使用jQuery库中的.next（）来定位每个建筑物的工具提示，但是我很难让它只是将图像悬停在鼠标上并用鼠标默认替换它。有任何想法吗？提前谢谢！

-Derek

Answer 1

如果您在链接的鼠标输出中测试工具提示上的鼠标悬停，则可以阻止它。但是你必须将mouseout绑定到工具提示，测试鼠标是否没有超过按钮。所以：只要鼠标超过其中一个，背景就会停留。只要您将两者都移除，背景就会重置。

将鼠标悬停在工具提示jQuery上的问题

1 个答案: