Question

我的网站设计已整合到他们公司内部。基本上他们用我的信息和徽标重新命名他们的网站。他们想要额外的钱来改变任何HTML文件。我只能访问样式表.css文件和图像。

我可以使用下面示例中列出的h3进行css显示/隐藏：我希望隐藏每个h3下的内容，直到用户点击它为止。为了示例目的，我缩短了从产品页面中提取的HTMl。

<div id="product_text_content">
    <p>Digital Brochures come in full color on 1 or 2 sides. Available options: 8 paper stocks, 5 sizes, and 3 coatings.</p>
     <h3 class="gray">SIZE:</h3>

    <ol>
        <li>8.5" x 11"</li>
        <li>8.5" x 14"</li>
        <li>11" x 17"</li>
        <li>11.5" x 17.5"</li>
        <li>5.5" x 8.5"</li>
    </ol>
     <h3 class="gray">PAPER OPTIONS:</h3>

    <ol>
        <li>100# Gloss Text available</li>
        <li>95# Gloss Cover available</li>
        <li>80# Uncoated Offset Smooth Text</li>
        <li>100# Uncoated Cover available</li>
        <li>70# White Linen Text</li>
        <li>100# White Linen Cover</li>
    </ol>
     <h3 class="gray">COATING OPTIONS:</h3>

    <ol>
        <li>No Coating available on all stocks.</li>
    </ol>
     <h3 class="gray">FOLDING OPTIONS:</h3>

    <ol>
        <li>Tri-Fold</li>
        <li>Z-Fold</li>
        <li>... and more</li>
    </ol>
     <h3>Custom Estimate:</h3>

    <p>For custom orders or quantities not listed for your desired product, please <a href="/account/estimate">click here</a> for a custom estimate.</p>
     <h3>Explanation of Turnaround Time</h3>

    <p>Here's a quick chart to explain turnaround times:</p>
    <img src="/img/products/turnaround.png" height="375" width="380">
    <p>Please note that turnaround time does not include shipping or mailing time. You may select from available production turnaround times and your preferred shipping time as you place your order.</p>
    <p>Turnaround times begin when the proof is approved. All times are based on standard business days Monday through Friday excluding federal holidays. For orders shipping to the <font color="blue">blue zone</font>, please use the Eastern time zone (New York). For orders shipping to the <font color="red">red zone</font>, please use the Pacific time zone (California). Please see the below map:</p>
    <img src="/img/products/map.jpg" height="155" width="300">
    <p>Our products are the same great quality for every turnaround time we offer.</p>
</div>

Answer 1

您可以这样做：

/* Make H3 look like a link. */
h3 {cursor: pointer;}
/* Hide all the OLs initially */
h3 + ol {display: none;}
/* Show when the user hovers H3 */
h3:hover + ol {display: block;}
/* Or show when he clicks and holds */
h3:active + ol {display: block;}

CSS显示仅隐藏

1 个答案: