Question

我有一些文本当我将悬停在图像上时，我想转移到右侧：

<div class="container-fluid">
  <div class="info-over">
    <div class="infoText">
      Text that need to move to the right
    </div>
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image">              
  </div>
</div>

当我悬停时，我希望 div infoText慢慢移动到右 50px image ，当我停止悬停图片时，它会慢慢向后移动。

尝试过渡，但它对我不起作用，也许你们可以帮忙？

Answer 1

您可以使用 Flexbox ，定位，order 属性以及相邻的兄弟组合（+） target .infoText div ：

＆＃13;

.info-over {
  display: inline-flex; /* takes only the content's width */
  flex-direction: column; /* stacks flex-items (children) vertically */
}

.infoText {
  order: -1; /* places the text above the img to achive the same display/layout as before */
  position: relative; /* positioned relative to its normal position */
  top: 0; /* default */
  left: 0; /* default */
  transition: left 1s linear; /* adjust */
}

.image:hover + .infoText {
  left: 50px;
  transition: left 1s linear; /* adjust */
}

＆＃13;

<div class="container-fluid">
  <div class="info-over">
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> <!-- moved it above the text so that you can use the + selector to target the element below -->
    <div class="infoText">Text that needs to move to the right</div>
  </div>
</div>

＆＃13;

transform: translateX()的另一种方式：

＆＃13;

.info-over {
  display: inline-flex;
  flex-direction: column;
}

.infoText {
  order: -1;
  transition: transform 1s linear;
}

.image:hover + .infoText {
  transform: translateX(50px);
  transition: transform 1s linear;
}

＆＃13;

<div class="container-fluid">
  <div class="info-over">
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> <!-- moved it above the text so that you can use the + selector to target the element below -->
    <div class="infoText">Text that needs to move to the right</div>
  </div>
</div>

＆＃13;

但我建议您使用第一种解决方案。

Answer 2

尝试

＆＃13;

$(".image").hover(function(){
$(this).closest('div').find('.infoText').animate({
    'marginLeft': '+=100px'
}, 500);
}, function(){
$(this).closest('div').find('.infoText').animate({
    'marginLeft': '-=100px'
}, 500);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="info-over">
    <div class="infoText">
      Text that need to move to the right
    </div>
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image">              
  </div>
</div>

＆＃13;

也添加适当的CSS。解决方案有点重复，但有效！

在悬停图片

2 个答案: