0

私は現在、リンクが必要な純粋な CSS カラー パレットに取り組んでいます。このパレットは、順序付けられていないリストを使用して作成し、それを<a>タグで囲みました。ただし、これはあまりセマンティックではないのではないかと思います。これを達成する正しい方法は何ですか？

HTML

<div class="color-palette">
<a href="#">Modern Feminine</a>
<a href="#">
    <ul class="color-chips group">
        <li class="grey">#999999</li>
        <li class="slate">#666666</li>
        <li class="lilac">#99878D</li>
        <li class="blush">#7E4A5C</li>
        <li class="plum">#372129</li>
    </ul><!--.color-chips group-->
</a>
</div><!--.color-palette-->

CSS

.color-palette {
    width: 280px;
    margin: 0 auto;
    padding: 0;
}

ul.color-chips {
    margin: 0 auto;
    padding: 0;
}

ul.color-chips li {
    float: left;
    margin: 0;
}

ul.color-chips li {
    float: left;
    width: 55px;
    height: 55px;
    text-indent: -9999px;
}
4

4 に答える 4

2

アンカー内にリストを配置することはできません。

リスト内の個々の項目を個別のリンクにする必要があります。

<ul class="color-chips group">
        <li class="grey"><a href="">#999999</a></li>
        <li class="slate"><a href="">#666666</a></li>
        <li class="lilac"><a href="">#99878D</a></li>
        <li class="blush"><a href="">#7E4A5C</a></li>
        <li class="plum"><a href="">#372129</a></li>
    </ul><!--.color-chips group-->

実際には何にもリンクしていない (つまり、ページ上で操作を行っている) ためにリンクが必要ない場合は、アンカーをまとめて削除してください。Javascript の onclick イベントをアタッチするときは必要ありません。

于 2012-05-02T13:52:29.833 に答える
1

クリックした後、何をしたいですか？クリックが発生したときにjavascriptイベントを使用しますか？

于 2012-05-02T13:56:05.443 に答える
1

すでにJSでクリックを処理しているので、アンカーは純粋に表面的なものだと思います。その場合、CSSを使用できます。

.color-chips:hover {
    cursor:pointer;
}
于 2012-05-02T14:20:51.760 に答える
1 
<ul class="color-chips group">
    <li class="grey"><a href="javascript:;">#999999</a></li>
    <li class="slate"><a href="javascript:;">#666666</a></li>
    <li class="lilac"><a href="javascript:;">#99878D</a></li>
    <li class="blush"><a href="javascript:;">#7E4A5C</a></li>
    <li class="plum"><a href="javascript:;">#372129</a></li>
</ul>
于 2012-05-02T13:53:57.083 に答える