如何更改：懸停背景顏色？

-1

我試過a:hover和.nav > li > a:hover但它不會改變背景顏色。或者我嘗試了.nav a:hover，這種方法很有效，但點擊後立即變爲您在圖像中看到的顏色。所以我也試過.nav a:visited，但是這並沒有改變任何東西。如何更改：懸停背景顏色？

任何想法？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="style.css" rel="stylesheet"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="js/main.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
    <body> 
     <div class = "supporting"> 
     <div class = "container-fluid"> 
      <div class="header"> 
       <h1 class = "logo"></h1> 
       <ul class="nav nav-pills"> 
        <li> 
        <a href="#">Projects</a> 
        </li> 
        <li> 
        <a href="#">Photography</a> 
        </li> 
        <li> 
        <a href="#">blog</a> 
        </li> 
       </ul> 
       <h1>i'm maria</h1> 
      </div> 
     </div> 
     </div> 
     <div class = "work"> 
     <div class = "container-fluid"> 
      <h1>work</h1> 
     </div> 
     </div> 
     </div> 
    </body> 
</html>

CSS：

html, body { 
    font-family:; 
    margin:0 auto; 
    text-transform: lowercase; 
} 

.nav { 
    float: right; 
    display: inline; 
    margin:0 auto; 
    list-style: none; 
} 

.nav li { 
    list-style: none; 
    display: inline; 
    padding-top:0; 
    padding-left: 10px; 
} 

.nav > li > a { 
    padding: 10px; 
    color: white; 
} 

.nav a:hover { 
    background-color: transparent !important; 
} 
.header { 
    width: 100%; 
    display:inline-block; 
    padding:10px; 
    margin: 0 auto; 
} 
.header h1 { 
    font-size: 50px; 
    margin:0 auto; 
    display:inline-block; 
} 

.header .nav { 
    padding-left:10px; 
} 

.work h1 { 
    border-left: 0px solid black; 
    padding:10px; 
    display:inline-block; 
    left:50%; 
    position: absolute; 
    transform: translate(-50%, -50%); 
    color:; 
    } 

.supporting h1 { 
    top: 50%; 
    left:50%; 
    position:absolute; 
    display:inline-block; 
    margin:0 auto; 
    transform: translate(-50%, -50%); 
    color:white; 

    } 
.supporting .container-fluid { 
    background-image: url("img/photo-top.jpg"); 
    height: 600px; 
    background-size: cover; 
    background-position: center center; 
    text-align: center; 
    position:relative; 
    top: 0; 

} 

.work .container-fluid { 
    height:500px; 
    margin: 0 auto; 
    background: white); 
    width:100%; 
    padding:0; 
} 

div.container-fluid { 
    padding:0; 
    width:100%; 
    height: 100%; 
}

來源

2017-08-29 user8473431

_「任何想法......？」 - 閱讀CSS Specificity的內容，並使用瀏覽器開發工具查看正在發生的事情。 – CBroe

你想要當懸停在鏈接上，然後bg顏色更改...？ –

我想要背景在懸停時透明 – user8473431

嘗試這個

懸停

.nav li a:focus, 
.nav li a:hover 
{ 
background-color:red/*desired color*/ 
}

CSS

懸停有源元件

.nav li.active a, .nav li.active a:hover, .nav li.active a:focus { background-color:Red;/*desired color*/ }
上

來源

2017-08-29 18:08:59

它沒有工作：/ – user8473431

@ user8473431給新代碼一個嘗試 –

實施例

：

html, body { 
 
    font-family:; 
 
    margin:0 auto; 
 
    text-transform: lowercase; 
 
} 
 

 
.nav { 
 
    float: right; 
 
    display: inline; 
 
    margin:0 auto; 
 
    list-style: none; 
 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    display: inline; 
 
    padding-top:0; 
 
    padding-left: 10px; 
 
} 
 

 
.nav > li > a { 
 
    padding: 10px; 
 
    color: white; 
 
    background-color: skyblue; 
 
} 
 

 
.nav a:hover { 
 
    background-color: transparent !important; 
 
    color:black; 
 
} 
 
.header { 
 
    width: 100%; 
 
    display:inline-block; 
 
    padding:10px; 
 
    margin: 0 auto; 
 
} 
 
.header h1 { 
 
    font-size: 50px; 
 
    margin:0 auto; 
 
    display:inline-block; 
 
} 
 

 
.header .nav { 
 
    padding-left:10px; 
 
} 
 

 
.work h1 { 
 
    border-left: 0px solid black; 
 
    padding:10px; 
 
    display:inline-block; 
 
    left:50%; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    color:; 
 
    } 
 

 
.supporting h1 { 
 
    top: 50%; 
 
    left:50%; 
 
    position:absolute; 
 
    display:inline-block; 
 
    margin:0 auto; 
 
    transform: translate(-50%, -50%); 
 
    color:white; 
 

 
    } 
 
.supporting .container-fluid { 
 
    background-image: url("img/photo-top.jpg"); 
 
    height: 600px; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    text-align: center; 
 
    position:relative; 
 
    top: 0; 
 

 
} 
 

 
.work .container-fluid { 
 
    height:500px; 
 
    margin: 0 auto; 
 
    background: white); 
 
    width:100%; 
 
    padding:0; 
 
} 
 

 
div.container-fluid { 
 
    padding:0; 
 
    width:100%; 
 
    height: 100%; 
 
}

<div class = "supporting"> 
 
<div class = "container-fluid"> 
 
<div class="header"> 
 
<h1 class = "logo"></h1> 
 
<ul class="nav nav-pills"> 
 
<li> 
 
<a href="#">Projects</a> 
 
</li> 
 
<li> 
 
<a href="#">Photography</a> 
 
</li> 
 
<li> 
 
<a href="#">blog</a> 
 
</li> 
 
</ul> 
 
<h1>i'm maria</h1> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class = "work"> 
 
<div class = "container-fluid"> 
 
<h1>work</h1> 
 
</div> 
 
</div>

來源

2017-08-29 18:08:25

不是我想要做的 – user8473431

確定我知道但我做了一些額外的更改，以便您可以輕鬆理解。但在這個片段你想改變....？ –

如何更改：懸停背景顏色？

回答

相關問題