Question

我希望有一个图片，点击后会淡出并显示文字＆＃34;在它后面＆＃34;。现在我所能做的就是让我的文字显示在图像的上方或下方，具体取决于我在html文件中移动元素的位置。

如果我能解决这个问题，那么计划就是让文本显示：none和image display：block然后通过单击图像/点击文本div来切换它们。

如果这没有意义，我可以尝试澄清。

我正在处理我的＆＃34;致敬页面＆＃34;免费代码营。这不是一项要求，而是我想要完成的额外工作。我的想法是让我的主图像逐渐消失并显示＆＃34;作业历史和Python时间线＆＃34;的列表项。我的代码笔链接在下面注释了所有内容。问题是最后的两个div元素＆＃34;主要形象＆＃34;和＆＃34;工作历史和Python时间表＆＃34;

Here is a link to my code pen

<!-- job history and Python timeline -->
<div id="history-timeline" class="text-center" style="display:show; inline">

  <p>
    <ul>
      <li>
        <li>
          <li>
            <li>
</div>

Answer 1

将position:absolute添加到您的图片中，因此它将不在页面流中，img将叠加在h2上。现在您可以在点击时隐藏图像。我在div的display:none上使用了hover。确保您的父div高度与图片的高度相匹配。

.hide_on_hover{
  width:200px;
  height:200px;
}
.hide_on_hover img{
  position:absolute;
}
.hide_on_hover:hover img{
  display:none;
}

<div id="main-image-div" class="text-center hide_on_hover">
    <img 
         id="main-image" 
         src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" 

         class="rounded img-thumbnail " width="200" height="200">

    <!-- job history and Python timeline -->

    <h2 id="history-timeline">does this work</h2>
        
    </div>

Answer 2

这可以通过调整定位和z-indexing轻松完成。

您的父div元素需要position: relative属性。然后，文本将具有position: absolute属性。这将允许文本与您的图像重叠。位置相对告诉子元素将自己定位为具有相对属性的关闭父元素。

下一步是应用更多属性来控制图层。根据我的理解，你会希望图像是顶层，文本是较低层。解决方法是将position: relative; z-index: 2应用于您的图片，并将z-index: 1添加到您的文字中。 z-index属性为重叠元素提供图层顺序。我们需要为图像赋予position: relative，因为该元素的默认位置忽略了z-index属性。事情现在应该开始接近了。

现在，您提到使用display: block和display: none属性隐藏图片并显示文字。这将基于您描述的功能，但会创建一个跳转效果，因为设置为display：none会丢失高度设置，因此您将在页面上折叠。如果您不想这样做，则需要使用visibility: hidden和visibility: visible代替。

然而，我可能会做的是添加一个新的css类：

.hidden{ opacity: 0 }

这样你可以拥有更简单的javascript，也可以达到动画淡入淡出效果的程度。说到Javascript，这将使用以下代码：

$("#main-image").click(function(){ $(this).toggleClass('hidden') });

以下是您修改过的代码的部分内容：

HTML：

<div id="main-image-div" class="text-center" style="position: relative">
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail">
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>        
</div>

CSS

.hidden{opacity: 0}

在此范围之外，您应该避免使用内联样式并让html只使用类。在你的css代码中引用这些类并在那里应用你的样式。这可以在您的网站建立时提供更清晰，更易于管理的代码。

Answer 3

试用此代码

   $(document).ready(function(){

      $("#main-image").click(function(){
         $(this).removeClass('show-block');
        $(this).addClass('hide-block');
        $('#history-timeline').removeClass("hide-block");
        $('#history-timeline').addClass("show-block");

      });
        $("#history-timeline").click(function(){
          $(this).removeClass('show-block');
        $(this).addClass('hide-block');
        $('#main-image').removeClass("hide-block");
          $('#main-image').addClass("show-block");

      });

    });

DEMO

如何将div元素放在同一个地方？（一个将隐藏并通过操作切换）

3 个答案:

如何将div元素放在同一个地方？ （一个将隐藏并通过操作切换）

3 个答案:

如何将div元素放在同一个地方？（一个将隐藏并通过操作切换）