ブレイクアウトボタン

Andyは、セマンティックHTMLを使用してクリック可能なカードコンポーネントを作成するための巧妙な方法を実証しています。この手法には、カード内のボタンが含まれますが、カード全体がクリック可能な領域として機能します。これは、ボタンの境界を越えて伸び、カード全体をカバーする擬似要素を使用することで実現されます。欠点は、テキストのオーバーレイの擬似要素のために、テキストの選択がわずかに損なわれます。しかし、アンディは、このアプローチがカード全体を作るよりも優れていると主張します<a></a>要素は、これがセマンティクスを妥協し、潜在的に支援技術に重大な問題を引き起こす可能性があるためです。

使用するときに同じ原則が適用されます<a></a>ボタンの代わりにリンクします。ただし、そのような場合、リンク内の領域全体を包むのは一般的に簡単で、ボタンのような部分がスタイルが整っています。<span></span>または視覚的な一貫性のための同様の要素。

この手法は、ネストされたリンクと同様の一般的な問題に対処します。他の個別にリンクされた領域を含む大きなリンクブロックです。ネスティングアンカーリンクには問題があります。 Sara Soueidanのエレガントなソリューションでは、カード内に絶対に配置された「カバー」リンクを配置してクリック可能な領域全体を包含し、カード内の他のリンクをz-indexを使用して上部に重ねることができます。

Sara Soueidanのソリューションを実証するCodepenは、参考になります。

以上がブレイクアウトボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。