开发者

Issue with hovering over tooltip jQuery

Ok so let me give a little background as to what the problem is...

Our client has a homepage campaign area that has 9 unique links, which when hovered over fade out the underlying default background image with a front image associated with the hovered link at that time a tool tip is fired above that link with a gallery description and a link to the gallery. On mouse out the default image is to reappear behind the links.

The problem is that when hovering over a link and then hovering over the corresponding tooltip, the mouseout event triggers for the link. The client wants the image to stay when hovering over the tooltip as well. Here is the code I currently have:

$("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");
          });      
    });

Here is the HTML markup

<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>

I thought i could possibly use the .next() in the jQuery library to target the tooltip for each building however i am having trouble getting it to just keep the image on hover and replacing it with the default on mouse out. Any ideas? thanks in advance!

-Derek


If you'd test for a mouseover on the tooltip from within the mouseout of the link, you could prevent it. But then you'd have to bind a mouseout to the tooltip, that tests if the mouse isn't over the button. So: as long as the mouse is over one of both, the background stays. As soon as you mouseout both, the background resets.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜