Question

我有一个在WordPress中制作的网站，我无法编辑任何HTML - 只添加CSS和Javascript。

我有两个元素，其中包含带文本和SVG图像的内容，另一个是引用网站页面的a元素。

这使得第二个元素在我看来有点像点击框。我在第一个元素下面绘制了第二个元素并将其偏移了它自身高度的100％（它们共享相同的高度并使用父容器的100％宽度，在本例中为列。这是页面的HTML。

<div class="wpb_wrapper">
                <style data-type="mBuilderInternal">
                    div.vc_column_container>.vc_column-inner.md_col-58ed434fd78d9{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}
                </style>

    <style scoped="">
        .text_box-58ed434fd7a20{
            background-color: rgb(255, 221, 178);
        }

        .text_box-58ed434fd7a20:hover{
            background-color: rgb(238, 170, 85);
        }

        .text_box-58ed434fd7a20 .text-box-title,
                                         .text_box-58ed434fd7a20 .text-box-icon,
                                         .text_box-58ed434fd7a20 .text-box-description{
                                             color: rgb(80,80,80);
                                         }

        .text_box-58ed434fd7a20:hover .text-box-title,
        .text_box-58ed434fd7a20:hover .text-box-icon,
        .text_box-58ed434fd7a20:hover .text-box-description{
            color: rgb(255,255,255);
        }

    </style>

    <div class="text-box text_box-58ed434fd7a20 has-animation show-animation" data-animation-speed="600" data-animation-delay="0.0" data-animation-position="center" data-animation-show="once" data-animation-easing="Quart.easeInOut" style="transform: translateX(0px) translateY(0px);opacity: 1;/* z-index: 1; */">
        <div class="text-box-content">
            <div class="text-box-icon-holder" style="margin-bottom: 0px; margin-top: 0px;">
                                    <div class="text-box-icon icon-Apple"></div>
                            </div>
            <div class="clearfix"></div>
            <!--End of Icon section-->

                            <h3 class="text-box-title" style="margin-bottom: 10px; margin-top: 28px;"> Creative Design </h3>
                        <!--End of Title section-->
        </div>
                    <p class="text-box-description" style="opacity: 0;">##### produces a variety of specialty advertising vehicles. - Click to Read More</p>
            <div class="clearfix"></div>
                <!--End of Description section-->
    </div>

    <script type="text/javascript">
        var $ = jQuery;
        if(typeof pixflow_textBox == 'function'){
            pixflow_textBox();
        }

            if ( document.readyState === 'complete' ){
        if(typeof pixflow_shortcodeAnimation == 'function'){
            pixflow_shortcodeAnimation();
        }
        if(typeof pixflow_shortcodeAnimationScroll == 'function'){
            pixflow_shortcodeAnimationScroll();
        }
    }

    </script>


    <div class="wpb_raw_code wpb_content_element wpb_raw_html">
        <div class="wpb_wrapper">
            <a href="http://c6f.1d3.myftpupload.com/"><div id="Service1" class="linkedbox">
</div></a>
        </div>
    </div>
            </div>

这是网站生成的所有原始HTML，下面是我为此页面使用的所有自定义CSS。

div.linkedbox {
    width: 100%;
    height: 300px;
    transform: translateY(-100%);
    visibility: visible;
    z-index: -1
}
div.wpb_raw_code {
    visibility: hidden;
    height: 0px;
    width: 100%;
    margin: 0xp;
    padding: 0px;
}

以下是在内容之后添加的HTML的一小部分，这是第二个元素。

<a href="http://c6f.1d3.myftpupload.com/"><div id="Service1" class="linkedbox">
</div></a>

同样，我要做的是将第一个元素链接到特定页面，并保留:onhover效果而不编辑标记。

CSS重叠元素

0 个答案: