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

时间：2016-05-13 11:45:14

标签： jquery css html5 css3

我的标记如下：

$('.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>

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

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

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

概念

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

问题

只要鼠标悬停在img.box元素上，此卡就应该可见，如果鼠标离开.box并且用户试图选择/点击.card容器，此卡应保持可见。一旦用户离开.card，它就会在一小段时间后淡出。

3 个答案:

答案 0 :(得分：2)

也许查看一些现有的解决方案，这也很容易使用CSS。 here is one solution

抱歉，我第一次没有正确理解。看看我的小提琴 https://jsfiddle.net/ywbz37qp/

＆＃13;
＆＃13; 
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');
  }
);
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

以下是你想要达到的目标吗？

$('.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>

答案 2 :(得分：0)

只需更改您的javascript，如下例所示

＆＃13;
＆＃13; 
$('.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);
});
＆＃13; 
.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;
        }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题