[英]Positioning a div/card when hovering over an image
I have markup as follows: 我有如下标记:
$('.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>
As can be seen from the snippet, the .card
element hides as soon as mouse hovers out of the .box
images. 从代码片段可以看出,只要鼠标悬停在.box
图像之外, .card
元素就会隐藏。 I've also tried using a code like the following: 我也尝试使用如下代码:
$('.card').removeClass('hidden').delay(2000).queue(
function() {
$(this).addClass('hidden').dequeue();
}
);
where .hidden
is provided by Bootstrap. 其中.hidden
由Bootstrap提供。 This works, but doesn't achieve what I have in mind. 这有效,但没有实现我的想法。
What I'm trying to do here is, the .card
box will be shown either to the left or right of the .box
images (depending on the [data-direction]
attribute), vertically aligned to the middle. 我在这里要做的是, .card
框将显示在.box
图像的左侧或右侧(取决于[data-direction]
属性),垂直对齐到中间。 The positioning part using JS is not a problem (I think). 使用JS的定位部分不是问题(我认为)。
This card should be visible as long as the mouse is hovering over the img.box
element, and later, if the mouse leaves the .box
and the user is trying to select/click on links in the .card
container, this card should stay visible. 只要鼠标悬停在img.box
元素上,此卡应该是可见的,稍后,如果鼠标离开.box
并且用户试图选择/单击.card
容器中的链接,则此卡应该保留可见。 Once the user leaves the .card
, it should fade-out after a small duration. 一旦用户离开.card
,它应该在一小段时间后淡出。
Maybe check out some existing solutions, this is easily doable using CSS only also. 也许查看一些现有的解决方案,这也很容易使用CSS也可以。 here is one solution 这是一个解决方案
Sorry I didn't understand correctly on the first time. 对不起我第一次听不懂。 Checkout my Fiddle https://jsfiddle.net/ywbz37qp/ 结帐我的小提琴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>
Is the below what you're trying to achieve? 以下是你想要实现的目标吗?
$('.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>
Just alter your javascript like in the below example 只需改变你的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.