Question

我需要将其中包含肖像和传记的页面更新为一个具有悬停效果的页面，其中包含显示传记的下拉字段。我在这里找到了完全符合我需要的代码（How to show text on image when hovering?），并在另一个站点上对其进行了测试，以确保其正常工作。问题是，当我将其放在页面模板上时，所有页眉和页脚编码（颜色，字体，样式等）都将被粘贴的代码覆盖。我不是编码器，只知道术语及其操作原理的一点点（所以请具体说明您的回答）。我想我需要将新代码放入某种容器中，以使默认页面/网站样式保持完整，但是我不确定该怎么做。我也不确定我的新悬停代码是否在正确的位置。我模板上的原始代码是这样的：

<!DOCTYPE html>
<html lang="en">
<!-- Head Tag -->
[[$head-tag]]

<style>
.top {
margin-bottom: -75px;
}
</style>
<body>
[[$gtm]]

<!-- Navigation -->
[[$navigation]]

<!-- PAGE CONTENT -->

<section class="top">
    <div class="container">

        [[$top-page-info]]


        <div class="row body-copy">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
[[*content]]
</div>
            </div>
        </div><!--end row-->
    </div><!--end container-->
</section>
<section class="leaders">
    <div class="container">
        <div class="row">


            [[!getPage? 
                &amp;elementClass=`modSnippet` 
                &amp;element=`getResources` 
                &amp;parents=`14` 

                &amp;depth=`0` 

                &amp;pageVarKey=`page` 
                &amp;includeTVs=`1` 
                &amp;processTVs=`1` 
                &amp;includeContent=`1` 
                &amp;showHidden=`1` 
                &amp;sortby=`{"publishedon":"DESC"}` 
                &amp;tpl=`LeaderTpl`]]


        </div><!--end row-->





    </div><!--end container-->
 </section>



<!-- PAGE CONTENT END-->


<!-- Footer -->
[[$footer]]

<!-- JS Includes -->
[[$js-includes]]



</body>

</html>

是否应该在“！getPage”位置插入新代码？部分（尽管我想知道是否删除其中的一部分会删除默认页面设置/样式所需的代码），还是应该将其放在关闭div并结束容器的最后一行的上方？

任何帮助或指导将不胜感激。（而且请具体，因为我不太了解所有这种语言。）TIA

防止新代码覆盖CSS的原始默认值

0 个答案: