当鼠标悬停在图像上时，如何定位一个div/card？

Question

当鼠标悬停在图像上时，如何定位一个div/card？

3

我有以下标记：

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

这里使用了Bootstrap提供的.hidden，虽然可以起到作用，但并不符合我的意图。

概念

我想要实现的是，.card盒子会显示在.box图片的左侧或右侧（取决于[data-direction]属性），并垂直居中。使用JS进行定位部分不是问题（我认为）。

问题

只要鼠标悬停在img.box元素上，就应该能看到这个卡片，如果鼠标离开.box并且用户试图选择/点击.card容器中的链接，则此卡片应该保持可见状态。一旦用户离开.card，它应该在短时间后淡出。

- hjpotter92

3个回答

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>

- David Liam Clayton

你嵌套另一个 .hover 监听器的想法启发了我想到别的事情。明天早上我会尝试稍微完善它。 - hjpotter92

0

只需像下面的示例那样修改您的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>

- user2560539

这完全不是我的问题陈述，也不是所期望的。 - hjpotter92

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- preator · Accepted Answer

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

抱歉我第一次理解错误了。请查看我的Fiddlehttps://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>