Chaning顏色

正如你在第一個圖片中看到，我得到一個藍色，當你將鼠標懸停在用鼠標在導航欄。在第二張照片上只有一個灰色的背景色。 HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Frontend</title> 
    <link href="~/Content/custom.css" rel="stylesheet" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="box"> 
       <div id="header"> 
        <br /> 
        <div id="searchMenu"> 
         <input id="sweBtn" type="button" value="SVENSKA" /> 
         <input id="engBtn" type="button" value="ENGLISH" /> 
         <input id="searchTxt" type="text" /> 
         <input id="searchBtn" type="button" value="SÖK" /> 
        </div> 
        <br /> 
       </div> 
       <div class="col-md-4"> 
        <img id="imgHeader" src="~/img/Header.png" /> 
       </div> 
       <div class="col-md-4 text-left" id="imgText"> 
        <h3>VÄLKOMOMEN TILL<br />SUBLIME<br />CONSULTING!</h3><br /> 
        <p>Alla Sveriges advokater är med i<br />Advokatsamfundet. Advokat-<br />samfundet upprätthålåler en hög<br />etisk och professionel standard<br /> hos Sveriges advokater, och ser till<br /> att advokaternas erfarenheter tas<br /> till vara i lagstifningen och den<br />övriga rättsutvecklingen.</p> 
       </div> 
       <div> 
        <ul id="navBar"> 
         <li><a>BEHÖVER DU AVOKAT?</a></li> 
         <li><a>ADVOKATETIK</a></li> 
         <li><a>ATT BLI ADVOKAT</a></li> 
         <li><a>UTBILDNING</a></li> 
         <li><a>ADVOKATSSAMFUNDET TYCKER</a></li> 
        </ul> 
        <img id="rssImg" src="~/img/RSSIcon.png" /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="box"> 
        <div id="footerMenu"> 
         <div class="col-md-4"> 
          <a>Gå till Juridiska Bibliotekets webbplats-></a> 
          <br /> 
          <a>Gå till tidskriften Advokaten -></a> 
          <br /> 
          <a>Gå till Hildas webbplats -></a> 
         </div> 
         <div class="col-md-4"> 
          <a>Om cookies-></a> 
         </div> 
         <div class="col-md-4"> 
          <p> 
           <strong>Sublime Consulting AB</strong> 
           <br />Telefon 08-459 96 00 
           <br /> 
           <a href="mailto:[email protected]">[email protected]</a> 
           <br /> 
           <a>Mer kontaktuppgifter -></a> 
          </p> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </footer> 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
</body> 
</html>

CSS：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

    li a { 
     display: block; 
     color: #F3CAAA; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

     li a:hover { 
      background-color: dimgrey; 
     } 

#header { 
    background-color: #503F31; 
    padding: 30px; 
} 

#searchMenu { 
    margin-left: 700px; 
} 

#sweBtn { 
    font-family: 'Times New Roman'; 
    background-color: Transparent; 
    border:double; 
    color: grey; 
} 

#engBtn { 
    font-family: 'Times New Roman'; 
    background-color: Transparent; 
    border: double; 
    color: #F3CAAA; 
} 

#searchTxt { 
    background-color: grey; 
    border-color: grey; 
} 

#searchBtn { 
    font-family: 'Times New Roman'; 
    background-color: Transparent; 
    color: #F3CAAA; 
} 

#imgText { 
    font-size: 25px; 
    position: absolute; 
} 

#imgHeader { 
    margin-left: -15px; 
    width: 1170px; 
    height: 450px; 
} 

#navBar { 
    margin-top: 450px; 
    font-family: 'Times New Roman'; 
    background-color: #503F31; 
    background-image: url(img/RSSIcon.png); 
} 

#rssImg{ 
    width: 30px; 
    height: 30px; 
    position:absolute; 
    margin-left: 1100px; 
    margin-top: -50px; 
} 

#footerMenu{ 

} 

footer { 
    background-color: lightgrey; 
}

這裏也是一個的jsfiddle如果它派上用場。

https://jsfiddle.net/37yzzj7k/

來源

2016-08-21 Malphai

如果您以相同尺寸顯示兩張圖片，縮小圖片以僅顯示圖片/渲染頁面的相關部分，並概述「標題」是什麼部分，可能會有所幫助。鑑於他們是不同的大小，並直接放置在另一個之上，它很難（確定'爲我'）來確定你正在談論的部分。 –

所以你想要在導航欄中懸停列表項時更改頁眉/頁腳顏色？ – mxlse

你的問題到底是什麼？ –

要改變懸停顏色只是去到你網頁和使用檢查元素，你可以發現，特定元素的類。然後複製課程並添加自己的風格。

來源

2016-08-22 06:44:59 Harshana

Chaning顏色

回答

相關問題