Question

我想问一下，当我悬停或点击该图片时，有没有办法用文字更改图片？

我的代码是：

.vimrc

Answer 1

请参阅以下示例onclick事件。

＆＃13;

.container3
{
background:black;
}
#content 
{
color:white;
}

＆＃13;

<div class="container3">
    <h1 class="header3"><font color="white">Tentang Kami</font></h1>
                <div class="content2" id="content">
                    <img src="about.png" align="center" class="gambar3" onclick="img_click()" />
                </div>
    </div>

    <script>
    function img_click(){
    document.getElementById("content").innerHTML = "Image Clicked";
      }
    </script>

＆＃13;

Answer 2

最简单的方法是切换图像和兄弟文本的可见性。

$(".hover").mouseover(function() {
  $(this).find('img').hide();
  $(this).find('.text').show();
}).mouseleave(function() {
  $(this).find('img').show();
  $(this).find('.text').hide();
});

$(".click").click(function() {
  $(this).find('img').toggle();
  $(this).find('.text').toggle();
});

.hover,
.click {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}

.hover .text,
.click .text {
  display: none;
}

.hover .text,
.click .text {
  line-height: 200px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content2 hover">
  <img src="https://www.qvb.com.au/images/phocagallery/thumbs/phoca_thumb_l_sample-200x200.png" align="center" class="gambar3">
  <p class="text">Demo Text</p>
</div>

<div class="content3 click">
  <img src="https://www.qvb.com.au/images/phocagallery/thumbs/phoca_thumb_l_sample-200x200.png" align="center" class="gambar3">
  <p class="text">Demo Text</p>
</div>

如何使用文本更改图像

2 个答案: