Html Wordpress中的自定义CSS混乱_Html_Css_Wordpress

Html Wordpress中的自定义CSS混乱

html css wordpress

Html Wordpress中的自定义CSS混乱,html,css,wordpress,Html,Css,Wordpress,我正在管理基于Wordpress的公司网站，我想知道如何更改我的联系人页面 <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" /> <span>Hover</span> </div> <div id="cf"> <img class="bottom" src="http:/

我正在管理基于Wordpress的公司网站，我想知道如何更改我的联系人页面

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

我已经为我想做的事做了一个代码笔：

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

html:

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

但是，当我将此html添加到我的页面和wordpress自定义css中的css时，您可以看到，一切都一团糟：

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

我尝试了很多方法，但都无法修复，有人知道吗？

图像标签下有额外的
导致悬停时高度变化的问题

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

根据其他问题，请从span标记中删除

z-index

，完成：）

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

请参见

图像标签下有额外的br。删除它。@Leothelion在页面上？在本页的“然后在图像下”。请从span标记中删除z-index，您就完成了：）z-index将在背景下隐藏该文本。在小提琴中，你们可能并没有那个么多，文本隐藏在白色背景后面。此外，您不需要在.column:last child（parent div）中填充bottom:90px，并在悬停文本的span标记中填充bottom:-62px。试试看：）

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>