a：ホバーの背景色を変更するには？

-1

a:hoverと.nav > li > a:hoverを試しましたが、背景色は変わりません。あるいは、私は.nav a:hoverを試しましたが、それはうまくいきましたが、クリックした直後に、背景が画像に表示される色に変わりました。だから私も.nav a:visitedを試しましたが、それは何も変わっていません。a：ホバーの背景色を変更するには？

アイデア？

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.active a, 
.nav li.active a:hover, 
.nav li.active a:focus 
{ 
background-color:Red;/*desired color*/ 
}

能動素子の上にホバー上のこの

CSS

ホバー上

.nav li a:focus, 
.nav li a:hover 
{ 
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

私は知っていますが、しかし、このスニペットであなたは何を変えたいのですか？ –

a：ホバーの背景色を変更するには？

答えて

関連する問題