HTMLナビゲーションバーのアクティブなアイテムにスタイルを適用

HTMLナビゲーションバーのアクティブなアイテムにスタイルを適用しようとしましたが、これは同じもののaタグと同じです。これを実験するHTMLナビゲーションバーのアクティブなアイテムにスタイルを適用

、私は以下http://cssdeck.com/labs/css-hover-effect

からの例をとっている、私は基本的に「アクティブ」新しいクラスを作成し、aに同じスタイルを複製し、私の修正コード、次のとおりです。

HTMLコード：

<!DOCTYPE html> 
<html lang = "en"> 

<head> 
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'> 
    <link rel = "stylesheet" type = "text/css" href = "CSS.css">  
</head> 

<body> 

<section style="background: #e74c3c; color: #fff;"> 
    <h2>Underline Stroke</h2> 
    <nav class="stroke"> 
    <ul> 
     <li><a href="#" class = "active">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Downloads</a></li> 
     <li><a href="#">More</a></li> 
     <li><a href="#">Nice staff</a></li> 
    </ul> 
    </nav> 
</section> 

</body>

CSSコード：

.center { 
    text-align: center; 
} 

section { 
    height: 100vh; 
} 

/* NAVIGATION */ 
nav { 
    width: 80%; 
    margin: 0 auto; 
    background: #fff; 
    padding: 50px 0; 
    box-shadow: 0px 5px 0px #dedede; 
} 
nav ul { 
    list-style: none; 
    text-align: center; 
} 
nav ul li { 
    display: inline-block; 
} 
nav ul li a, nav ul li a.active { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    color: #aaa; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0 10px; 
} 
nav ul li a, 
nav ul li a:after, 
nav ul li a:before, 
nav ul li a.active:after, 
nav ul li a.active:before { 
    transition: all .5s; 
} 
nav ul li a:hover { 
    color: #555; 
} 


/* stroke */ 
nav.stroke ul li a, 
nav.fill ul li a, 
nav.stroke ul li a.active, 
nav.fill ul li a.active { 
    position: relative; 
} 
nav.stroke ul li a:after, 
nav.fill ul li a:after, 
nav.stroke ul li a.active:after, 
nav.fill ul li a.active:after { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 0%; 
    content: '.'; 
    color: transparent; 
    background: #aaa; 
    height: 1px; 
} 
nav.stroke ul li a:hover:after, 
nav.stroke ul li a.active:hover:after { 
    width: 100%; 
} 

nav.fill ul li a, 
nav.fill ul li a.active { 
    transition: all 2s; 
} 

nav.fill ul li a:after, 
nav.fill ul li a.active:after { 
    text-align: left; 
    content: '.'; 
    margin: 0; 
    opacity: 0; 
} 
nav.fill ul li a:hover { 
    color: #fff; 
    z-index: 1; 
} 
nav.fill ul li a:hover:after { 
    z-index: -10; 
    animation: fill 1s forwards; 
    -webkit-animation: fill 1s forwards; 
    -moz-animation: fill 1s forwards; 
    opacity: 1; 
}

残念ながら、スタイルはナビゲーションメニューの「アクティブ」クラスに反映されません。

エラーコードを修正するにはどうすればよいですか？あなたが考慮する必要があり

出典

2017-12-15 Bogaso

「アクティブ」の綴りから始まる –

ポイント：

あなたがsame styles for the anchor tag and the anchor tag with the class activeを適用するつもりなら、あなたは明示的にアクティブクラスに言及する必要はありません。それにかかわらず、applies it on all。
other styles which should be applied specifically for only active classが必要な場合は、デモンストレーション用にアクティブなクラスコンポーネントの色を赤に変更したように定義する必要があります。

.active { ... }

第三に、あなたはあなたのhtmlで間違っspelling of activeを得ました。

.center { 
 
    text-align: center; 
 
} 
 

 
section { 
 
    height: 100vh; 
 
} 
 

 
/* NAVIGATION */ 
 
nav { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
    padding: 50px 0; 
 
    box-shadow: 0px 5px 0px #dedede; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
} 
 
nav ul li a{ 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
} 
 
nav ul li a, 
 
nav ul li a:after, 
 
nav ul li a:before{ 
 
    transition: all .5s; 
 
} 
 
nav ul li a:hover { 
 
    color: #555; 
 
} 
 

 

 
/* stroke */ 
 
nav.stroke ul li a, 
 
nav.fill ul li a{ 
 
    position: relative; 
 
} 
 
nav.stroke ul li a:not(.active):after{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 0%; 
 
    content: '.'; 
 
    color: transparent; 
 
    background: #aaa; 
 
    height: 1px; 
 
} 
 
nav.stroke ul li a:hover:after{ 
 
    width: 100%; 
 
} 
 

 
.active{ 
 
color: #555; 
 
} 
 
.active:after{ 
 
position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 100%; 
 
    content: '.'; 
 
    background: #aaa; 
 
    height: 1px; 
 
}

<section style="background: #e74c3c; color: #fff;"> 
 
    <h2>Underline Stroke</h2> 
 
    <nav class="stroke"> 
 
    <ul> 
 
     <li><a href="#" class="active">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Downloads</a></li> 
 
     <li><a href="#">More</a></li> 
 
     <li><a href="#">Nice staff</a></li> 
 
    </ul> 
 
    </nav> 
 
</section>

更新：

これら二つのCSSスタイルは、デフォルトでアクティブにかかる負荷のホバー効果を持つように更新されました。

nav.stroke ul li a:not(.active):after{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 0%; 
    content: '.'; 
    color: transparent; 
    background: #aaa; 
    height: 1px; 
} 
nav.stroke ul li a:hover:after{ 
    width: 100%; 
} 

.active{ 
color: #555; 
} 
.active:after{ 
position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100%; 
    content: '.'; 
    background: #aaa; 
    height: 1px; 
}

出典

2017-12-15 22:10:24

あなたのポインタをありがとう。ただし、ホバー効果を持たない「アクティブ」クラスの割り当てが必要な場合があります。たとえば、ナビゲーションメニューのアイテムをブラウザのスクロール位置に基づいてアクティブ化すると、ホバー効果を乗り越える必要は必ずしもありません。私はこのような活性化のためにここで設計されたホバー効果をどのように複製するのが好奇心です。何か案が？ – Bogaso

@Bogaso投稿の最後に更新されました。今すぐ表示しようとすると、アクティブにはデフォルトでホバー効果があります。使用したのはnot（.active）なので、アクティブなアンカータグにはトランジションは適用されず、残りのトランジションは適用されます。 –

優れたHighdef。あなたのコードのためのThaks。 – Bogaso

アクティブなクラスにのみ適用するスタイルはありません。すべてのスタイルは要素とa.activeの両方に適用されます。 a.active要素を異なるものにするには、異なるスタイルを適用します。

a { 
    color: #fff; 
} 

a.active { 
    color: #34dd42; 
}

前述の答えでは、assとa.activeの両方をcssセレクタに指定することは冗長で不要なことです。 a要素だけにスタイルを適用するだけで、両方をカバーできます。

出典

2017-12-16 02:40:44

HTMLナビゲーションバーのアクティブなアイテムにスタイルを適用

答えて

関連する問題