可单击滚动图像以显示文本框

clickable rollover image to show text box

本文关键字：显示 文本 图像 单击 滚动      更新时间：2023-09-26

我有3个滚动图像，我想用它作为触发器，在每个图像下显示文本框。每当我尝试点击它时，它就会消失，并且不起作用。我正在努力使第一个至少工作。这是我的代码和网页。http://yunjinkimdesign.com/question/practice_div.html?

片段中显示的图片只是我从谷歌带来的样本。。。片段和我的实际样本是不同的

$('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.bottom').hide();
	$parent_box.find('.bottom').toggle();
});
img{
	width: 200px;
	border-radius: 50%;
}
div{
	margin: 20px;
}
.container .box .top {
  padding: 12px;}
.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <div class="top">
      <a href="?"><img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" onmouseover="this.src='https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'" onmouseout="this.src='http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg'"></a>
    </div>
    <div class="bottom">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>

您已经在锚点中给定了href=?，只需将?替换为#或从锚点中删除href属性，代码就会根据需要运行。

<a href="#"><img src="lib/2.png" onmouseover="this.src='lib/papa.jpg'" onmouseout="this.src='lib/2.png'"></a>


$('.top').on('click', function() {
  $parent_box = $(this).closest('.box');
  $parent_box.siblings().find('.bottom').hide();
  $parent_box.find('.bottom').toggle();
});
img {
  width: 200px;
  border-radius: 50%;
}
div {
  margin: 20px;
}
.container .box .top {
  padding: 12px;
}
.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="top">
    <a href="#">
      <img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" onmouseover="this.src='https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'" onmouseout="this.src='http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg'">
    </a>
  </div>
  <div class="bottom">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

相关文章：