0

したがって、基本的には、divで作成したナビゲーションを使用して、各行（id）が異なる色でロールオーバーするようにします。

私はそれを行うためにたくさんの異なる方法を試しました、そして私は私が信じるIDを正しく使うことに行き詰まっています。

<div class="navcontainer">
        <div id="1"><a href="#">home</a></div>
        <div id="2"><a href="#">work</a></div>
        <div id="3"><a href="#">resume</a></div>
        <div id="4"><a href="#">about</a></div>
        <div id="5"><a href="#">links</a></div>
</div>

そしてCSS

.navcontainer {
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
}
.navcontainer div a {
background-color:black;
margin:2px;
padding:2px;
display:inline;
float:left;
clear:both;
color:white;
text-decoration:none
}
.navcontainer #1 a:hover {
color:black;
background-color:red;
}
.navcontainer #2 a:hover {
color:black;
background-color:orange;
}
4

2 に答える 2

5

IDとクラスをnumerical(1,2,3,) 桁で始めないでください。次のように書きます。

#nav1,#nav2...

HTML

<div class="navcontainer">
        <div id="nav1"><a href="#">home</a></div>
        <div id="nav2"><a href="#">work</a></div>
        <div id="nav3"><a href="#">resume</a></div>
        <div id="nav4"><a href="#">about</a></div>
        <div id="nav5"><a href="#">links</a></div>
</div>
于 2012-07-31T04:25:09.070 に答える
1

ID 名を数字で始まらないアルファベットに変更します。

いいえ:

.navcontainer #one a:hover {
color:black;
background-color:red;
}

<div class="navcontainer">
    <div id="one"><a href="#">home</a></div>
    <div id="2"><a href="#">work</a></div>
    <div id="3"><a href="#">resume</a></div>
    <div id="4"><a href="#">about</a></div>
    <div id="5"><a href="#">links</a></div>
</div>
于 2012-07-31T04:28:29.007 に答える