javascript - 如何在保持鼠标悬停功能的同时使图像居中

Question

<div class="pic">

    <img src="image.jpg" height="250"/>
    <span class="text" style="display:none">text here</span>

</div>

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script>

<script type="text/javascript">

    $('img').css('opacity', 0.4);
    $('img').next('span.text').show();

    $('img').bind('mouseover', function () {
        $(this).css('opacity', 1.0);
        $(this).next('span.text').hide();
    });
    $('img').bind('mouseout', function () {
        $(this).css('opacity', 0.3);
        $(this).next('span.text').show();
    });

</script>

我有一个不透明的图像，在 mouseover 上变得完全可见。我添加了带有 span 的文本，它会在 mouseover 上消失并在 mouseout 上重新出现，类似于图像上的不透明。我尝试在 CSS 中使用 margin-left:auto 和 margin-right:auto 将文本居中，但没有结果。有没有一种方法可以使文本居中，同时仍然保持不透明并且文本在 mouseover 上消失？ Javascript 是最好的方法吗？

谢谢

Answer 1

你不能用 CSS 做到这一点吗？

body {
  text-align: center;
}
.pic {
  display: inline-block;
  margin: 25px;
  border: 1px solid red;
  position:relative;
}
.pic img {
  display: block;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}
.text {
  opacity: 1;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition: opacity 0.5s ease;
}
.pic:hover img {
  opacity: 1;

}
.pic:hover .text {
  opacity: 0;

}

<div class="pic">

  <img src="http://lorempixel.com/output/city-q-c-250-250-7.jpg" />
  <span class="text">text here</span>

</div>