我网站的设计与他们公司融为一体。基本上他们正在用我的信息和徽标重新命名他们的网站。他们想要额外的钱来更改任何 HTML 文件。我只能访问样式表 .css 文件和图像。
我可以用 css 显示/隐藏吗h3
下面的示例中列出:
我想隐藏每个下面的内容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>
你可以这样做:
/* 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;}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)