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. 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. This works, but doesn’t achieve what I have in mind.
Concept
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. The positioning part using JS is not a problem (I think).
Issue
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. Once the user leaves the .card
, it should fade-out after a small duration.
3
Answers
Maybe check out some existing solutions, this is easily doable using CSS only also. here is one solution
Sorry I didn’t understand correctly on the first time. Checkout my Fiddle
https://jsfiddle.net/ywbz37qp/
Just alter your javascript like in the below example
Is the below what you’re trying to achieve?