我頂欄上沒有懸停

-1

改變顏色我試圖使自己的網站，但我有一些困難，我頂欄上hovor不變色。如果您認爲可以提供幫助，請回答。我頂欄上沒有懸停

index.html工作完美，只是認爲它可能需要添加。

<!DOCTYPE html> 
<html> 
    <head> 
    <title> my site </title> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
    </head> 
    <body> 
    <header> 
     <ul> 
     <li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a> 
     <li> <a href="aboutme/aboutme.html" >About Me</a></li> 
     <li> <a href="resume/resume.html" >Résumé</a></li> 
     </ul> 
    </header> 
    </body> 
</html>

index.css，東西只爲頭。

header ul { /*selects list of stuff*/ 
    list-style-type: none; /*no bullet points*/ 
    margin: 0; 
    padding: 0; 
    background-color: #70deef; 
    position: fixed; 
    width: 100%; 
    height: 50px; 
} 
header li { /*selects list element*/ 
    float: left; /*move to left*/ 
} 
header li a { 
    display: block; /*makes a rectangle*/ 
    color: #ffffff; /*white*/ 
    text-align: center; 
    text-decoration: none; 
    padding: 20px; 
} 
header li a.active { /*when hovering??*/ 
    background-color: #d6d6d6; /*grey*/ 

}

我以爲header li a.active會改變懸停的顏色。爲什麼不這樣做？

來源

2017-01-17 lol

應用的一類像'。主動懸停時只能與JavaScript結合使用。你已經有了多個答案，你如何使用CSS中的僞類來完成它。 –

嘗試使用a:hover。不是a.active或類似的東西。

有關詳細信息，請參閱CSS :hover Selector，CSS Pseudo-classes或者更一般CSS Selector Reference

header ul { 
 
    /*selects list of stuff*/ 
 
    list-style-type: none; 
 
    /*no bullet points*/ 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #70deef; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
header li { 
 
    /*selects list element*/ 
 
    float: left; 
 
    /*move to left*/ 
 
} 
 
header li a { 
 
    display: block; 
 
    /*makes a rectangle*/ 
 
    color: #ffffff; 
 
    /*white*/ 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 
header li a:hover { 
 
    /*when hovering??*/ 
 
    background-color: #d6d6d6; 
 
    /*grey*/ 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>my site</title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" type="text/css" href="index.css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <ul> 
 
     <li> <a href="gradecalc/gradecalc.html">Grade Calculator</a> 
 
     <li> <a href="aboutme/aboutme.html">About Me</a> 
 
     </li> 
 
     <li> <a href="resume/resume.html">Résumé</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 
</body> 
 

 
</html>

來源

2017-01-17 13:25:44

爲什麼酒吧變得灰色更大？ – lol

因爲你的'a'元素有一個沒有顏色的'padding：20px'。如果你爲'a'元素添加顏色，你可以看到填充。你可以通過改變填充從'header li a'到'padding：20px 20px 10px;'來防止這種情況 –

您必須使用CSS選擇:hover

header li a:hover { /*when hovering??*/ 
    background-color: #d6d6d6; /*grey*/ 
}

來源

2017-01-17 13:26:09

我頂欄上沒有懸停

回答

相關問題