悬停在图像上时定位div /卡

Question

我有如下标记：

 $('.box').hover( function(e) { var $this = $(this); $('.box').not($this).addClass('filter'); $('.card').show(); }, function(e) { var $this = $(this); $('.box').not($this).removeClass('filter'); $('.card').hide(); } ); 

 .card { display: none; width: 250px; height: auto; border: thin red solid; border-radius: 2em; padding: 1em 0; } .box { transition: all .5s linear; } .filter { -webkit-filter: opacity(.1); -moz-filter: opacity(.1); -ms-filter: opacity(.1); -o-filter: opacity(.1); filter: opacity(.1); } html, body { background-color: aquamarine; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> </div> <div class="card"> <h1 class="text-uppercase">card here</h1> </div> 

从代码片段可以看出，只要鼠标悬停在.box图像之外， .card元素就会隐藏。 我也尝试使用如下代码：

$('.card').removeClass('hidden').delay(2000).queue(
  function() {
    $(this).addClass('hidden').dequeue();
  }
);

其中.hidden由Bootstrap提供。 这有效，但没有实现我的想法。

概念

我在这里要做的是， .card框将显示在.box图像的左侧或右侧（取决于[data-direction]属性），垂直对齐到中间。 使用JS的定位部分不是问题（我认为）。

问题

只要鼠标悬停在img.box元素上，此卡应该是可见的，稍后，如果鼠标离开.box并且用户试图选择/单击.card容器中的链接，则此卡应该保留可见。 一旦用户离开.card ，它应该在一小段时间后淡出。

Answer 1

也许查看一些现有的解决方案，这也很容易使用CSS也可以。 这是一个解决方案

对不起我第一次听不懂。 结帐我的小提琴https://jsfiddle.net/ywbz37qp/

 var active; $('.box').hover( function(e) { var $this = $(this); active = $(this); $('.box').not($this).addClass('filter'); var leftOffset = active.parent().position().left; console.log(leftOffset); $('.card').show().css("left", leftOffset); }, function(e) { var $this = $(this); $('.box').not($this).removeClass('filter'); $('.card').hide(); } ); $('.card').hover( function(e) { $('.card').show(); $('.box').not(active).addClass('filter'); }, function(e) { $('.card').hide(); $('.box').not(active).removeClass('filter'); } ); 

 .card { display: none; width: 250px; height: auto; border: thin red solid; border-radius: 2em; padding: 1em 0; } .box { transition: all .5s linear; } .filter { -webkit-filter: opacity(.1); -moz-filter: opacity(.1); -ms-filter: opacity(.1); -o-filter: opacity(.1); filter: opacity(.1); } html, body { background-color: aquamarine; } .card{ position: absolute; top: 50%; transform: translateY(-50%); } .wrap{ position: relative; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="row"> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> </div> <div class="card"> <h1 class="text-uppercase">card here</h1> </div> </div> 

Answer 2

以下是你想要实现的目标吗？

 $('.box').hover( function(e) { var $this = $(this); $('.box').not($this).addClass('filter'); $('.card').show(); $('.card').hover("", function(){$('.card').hide();}) }, function(e) { var $this = $(this); $('.box').not($this).removeClass('filter'); } ); 

 .card { display: none; width: 250px; height: auto; border: thin red solid; border-radius: 2em; padding: 1em 0; } .box { transition: all .5s linear; } .filter { -webkit-filter: opacity(.1); -moz-filter: opacity(.1); -ms-filter: opacity(.1); -o-filter: opacity(.1); filter: opacity(.1); } html, body { background-color: aquamarine; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> </div> <div class="card"> <h1 class="text-uppercase">card here</h1> </div> 

Answer 3

只需改变你的javascript，如下例所示

 $('.box').addClass('filter'); // apply filter class to all box elements $('.box').on('mouseover',function() { $(this).removeClass('filter'); $('.card').show(300).offset({ top: 100, left: $(this).offset().left}); }); $('.box').on('mouseout',function() { $(this).addClass('filter'); $('.card').hide(950); }); 

 .card { display: none; width: 100px; height: auto; border: thin red solid; border-radius: 2em; padding: 1em 0; position:fixed; top:100px; } .box { transition: all .5s linear; height:300px; } .filter { -webkit-filter: opacity(.1); -moz-filter: opacity(.1); -ms-filter: opacity(.1); -o-filter: opacity(.1); filter: opacity(.1); } html, body { background-color: aquamarine; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="right" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> <div class="text-center col-xs-3"> <img class="box" data-direction="left" src="https://placehold.it/100x300" /> </div> </div> <div class="card"> <h1 class="text-uppercase">card here</h1> </div>