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做到这一点吗？

＆＃13;

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;

}

＆＃13;

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

＆＃13;

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

1 个答案: