0

私は非常に単純に見える何かに行き詰まっていますが、細部が欠けているに違いありません。私はこのdivを持っています:

<div id="menu" class="menu_div">
<a href="/">HOME</a> | 
<a href="/pics.php">PICTURES</a>
</div>

そして、スタイルタグ内の次の

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
    a:link {color:#000000; text-decoration:none;}      /* unvisited link */
    a:visited {color:#000000; text-decoration:none;}  /* visited link */
    a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
    a:active {color:#FF0000; text-decoration:none;}  /* selected link */
}

リンク以外はすべて機能します。.menu_div a:hover などの他の組み合わせを試しましたが、何もうまくいかないようです。

ありがとう

4

2 に答える 2

4

SASS または LESS タグが表示されないので、解決策を示します。CSS でルールをネストすることはできません。それらを個別に定義する必要があります。

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}   /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}     /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}    /* selected link */
于 2012-12-12T16:16:15.913 に答える
2

CSS でルールセットをネストすることはできません。子孫コンビネータを使用する必要があります。

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}  /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}  /* selected link */
于 2012-12-12T16:16:02.330 に答える