css - 我想在段落中显示图像，但是当我单击以显示图像时，文本会上下移动

Question

我有一个段落，我想在段落中的某些单词(如马、云等)上显示图像。问题是，当我在段落中的单词上显示图像时，单词和线条会上下移动，但我想要当我点击显示图像的按钮时，段落线和文本应该固定，不能上下移动。

<div class="member-detail-wrap" id="story_div"  ontouchstart="showImage()"  ontouchend="hideImage()">                                       

<div class="sqs-block-content">
 <p id="story">
   Charlie was so used to all his toys and various stuff, that he began to want something different. 
   One of his uncles found a fine <span class="horse"> horse </span> and he gave it to Charlie, as something unusual. 
   Charlie was very excited at having a <span class="horse2">horse </span>. He learned to ride, and was constantly on his horse, around the <span class='farm'> farm </span>.

   However, he treated the horse just as badly as he did all his other toys, 
   and it soon started looking neglected and sick. For the first time in his life Charlie became truly worried. 
   He loved the horse, and the fact that his family had offered to swap it for a new one meant nothing to him.
  </p>
 </div>
</div>

<script>
function showImage()
{
    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
      $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
      $('.farm').html('<span class="farm"> farm </span>').fadeIn();

    $('.horse').html('<img src="stories/hourse.jpeg" width="55" height="53">');
      $('.horse2').html('<img src="stories/hourse.jpeg" width="60" height="53">');
      $('.farm').html('<img src="stories/farm.jpg" width="50">');
}
function hideImage()
{
    $('.horse').fadeOut(1500);
    $('.horse2').fadeOut(1500);
    $('.farm').fadeOut(1500);
  setTimeout(function(){
    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
    $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
    $('.farm').html('<span class="farm"> farm </span>').fadeIn();
  },1500)

}
</script>

段落截图。

Answer 1

纯 CSS 解决方案怎么样？

将图像添加为 before 伪元素，并将它们居中放置在单词的顶部。默认情况下使它们不可见，但在 story_div 处于事件状态时将它们转换为可见。

Here is a jsfiddle以防下面的代码片段不起作用。

.pic {
  position: relative;
}

.pic:before {
  content: '';

  /* center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* scale */
  background-size: 50px;
  width: 50px;
  height: 50px;

  /* hide */
  visibility: hidden;
  opacity: 0;
  transition: visibility 1.5s ease, opacity 1.5s ease;
}

#story_div:active .pic:before {
  visibility: visible;
  opacity: 1;
}

.pic.horse:before {
  background-image: url('https://via.placeholder.com/50');
}

.pic.farm:before {
  background-image: url('https://via.placeholder.com/50');
}

<div id="story_div" class="member-detail-wrap">
  <div class="sqs-block-content">
    <p id="story">
      Charlie was so used to all his toys and various stuff, that he began to want something different.
      One of his uncles found a fine <span class="pic horse">horse</span> and he gave it to Charlie, as something unusual.
      Charlie was very excited at having a <span class="pic horse">horse</span>. He learned to ride, and was constantly on his horse, around the <span class='pic farm'>farm</span>.

      However, he treated the horse just as badly as he did all his other toys,
      and it soon started looking neglected and sick. For the first time in his life Charlie became truly worried.
      He loved the horse, and the fact that his family had offered to swap it for a new one meant nothing to him.
    </p>
  </div>
</div>