jsfiddleが動作していないか、私のCSS/htmlですか？

-2

ホバー効果が働いていない、リストスタイルのタイプがまだ弾丸で、フレックスボックスが私の望むように動作していません。何らかの理由で、BODYとAの両方でフォントファミリを指定する必要があります。それ以外の場合は表示されません。 googleのフォントをインポートする方法に何か問題はありますか？私のコードに何か問題があるのですか、それともjsfiddleと何か関係がありますか？jsfiddleが動作していないか、私のCSS/htmlですか？

HTML：

<body> 

<ul class="container"> 
    <li class="item"><a href="">Home</a></li> 
    <li class="item"><a href="">About</a></li> 
    <li class="item"><a href="">Services</a></li> 
    <li class="item"><a href="">Contact</a></li> 
</ul> 

</body>

CSS：

@import url('https://fonts.googleapis.com/css?family=Kumar+One'); 

//GENERAL 

body{ 
    font-family: 'Kumar One', cursive; 
} 

a{ 
    text-decoration: none; 
    font-family: 'Kumar One', cursive; 
} 

//CLASSES AND ID'S 

.container{ 
    display: flex; 
    justify-content: space-around; 
    list-style-type: none; 
} 

.item{ 
    width: 8em; 
    text-align: center; 
    background-color: #10999e; 
} 

//INTERACTION 

.item:hover{ 
    background-color: #0b6c70; 
}

出典

2017-01-07 Daniel Evans

に取り組んでいる – RamblinRose

インラインコメント（ '//'）[動作しません]（http://stackoverflow.com/a/ 11218889/11683）をCSSで使用します。それらを削除すると、あなたのフィドルが修正されます。 – GSerg

問題は、CSSの誤った構文で追加したコメントにあります。ここで

が固定コードが役に立つかもしれませんあなたのフィドルへのリンク jsfiddle

@import url('https://fonts.googleapis.com/css?family=Kumar+One'); 

a{ 
    text-decoration: none; 
    font-family: 'Kumar One', cursive; 
} 

.container{ 
    display: flex; 
    justify-content: space-around; 
    list-style-type: none; 
} 

.item{ 
    width: 8em; 
    text-align: center; 
    background-color: #10999e; 
} 


.item:hover{ 
    background-color: #0b6c70; 
}

出典

2017-01-07 22:15:19 LowMatic

あなたの問題は、コード内のコメントに関係しています。 CSSではコメントは/* comment here */

あなたはコメントを書かれているあなたの仕方のように書かれている、// commentはプリプロセッサSASS（および他の言語の多く）で動作するコメント構文です。

本文上のfont-family宣言を削除して（必要に応じて）、コメント構文をオフにします。

出典

2017-01-07 22:04:02 Kevinmartinez

jsfiddleが動作していないか、私のCSS/htmlですか？

答えて

関連する問題