CSS錨定懸停的背景？

請點擊這裏查看我的當前頁面：http://shrineweb.in/other-files/other/showyourskills-responsive-certsplan/index.html CSS錨定懸停的背景？

而我要實現的是：http://shrineweb.in/other-files/other/showyourskills-responsive-certsplan/Home-nav.jpg

我試圖用一個做到這一點：懸停並把背景爲白色和藍色的固定背景圖片在底部重複x。但它不工作。

標記：

<nav> 
    <ul> 
     <li><a href="javascript:void(0)"><img src="img/home.png" alt="Home Icon"></a></li> 
     <li><a href="javascript:void(0)">Bundle</a></li> 
     <li><a href="javascript:void(0)">Faqs</a></li> 
     <li><a href="javascript:void(0)">Contact Us</a></li> 
    </ul> 
</nav>

CSS：

nav ul 
{ 
list-style:none;} 

nav ul li 
{ 
    display: block; 
    float: left; 
    padding-top: 38px; 
    padding-right: 20px; 
    padding-bottom: 35px; 
    padding-left: 20px; 
} 

nav ul li a 
{ 
    font-family: 'PT Sans', sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 400; 
    color: #2a323a; 
} 

nav ul li a:hover 
{ 
    background-color: #ffffff; 
    background-attachment: fixed; 
    background-image: url(../img/hover-bg_05.png); 
    background-repeat: repeat-x; 
    background-position: bottom; 
}

有什麼建議？

來源

2014-03-28 Grey-lover

所有你需要做的是刪除4px底部填充錨點添加4px底部邊界在兩個狀態。 – arma

嘗試用

nav ul li { 
    display: block; 
    float: left; 
    padding-top: 38px; 
    padding-bottom: 35px; 
} 

nav ul li a { 
    font-family: 'PT Sans', sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 400; 
    color: #2a323a; 
    padding: 20px; 
    border-bottom: solid 7px #CCC; 
} 



nav ul li a:hover { 
    background-color: #ffffff; 
    background-attachment: fixed; 
    background-image: url("http://shrineweb.in/other-files/other/showyourskills-responsive-certsplan/css/../img/hover-bg_05.png"); 
    background-repeat: repeat-x; 
    background-position: bottom; 
    border-bottom: solid 7px blue; 
}

來源

2014-03-28 06:32:45

嗨，底部的藍線還沒有出現。我已更新了我的鏈接。 –

我已經更新了答案，請檢查它 –

謝謝你的工作。但我也希望在活動鏈接上有這種效果（除了懸停）。我嘗試在'nav ul li a：active'中添加相同的樣式，但它不起作用。 –

首先你必須用短手性的，這是一個很好的做法，以及代碼不太行，將有助於減小文件大小也。

檢查Demo。

nav ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
background-color:#F6F6F6; 
} 

nav ul li 
{ 
display: block; 
float: left; 
padding:25px 20px; 
border-bottom:4px solid #DDDDDD; 
} 

nav ul li a 
{ 
font: 400 14px Arial, Helvetica, sans-serif; 
text-decoration:none; 
text-transform: uppercase; 
color: #2a323a; 
} 

nav ul li:hover 
{ 
background-color: #ffffff; 
/*background-attachment: fixed; 
background-image: url(../img/hover-bg_05.png);*/ 
border-bottom:4px solid #3DA6DC; 
} 
.current 
{ 
    border-bottom:4px solid #3DA6DC; 
    background-color: #ffffff; 
}

並使用這個小jQuery代碼，你可以激活這個類。

$("li").click(function() { 
    $(this).toggleClass("current"); 
    $("li").not(this).removeClass("current"); 
});

來源

2014-03-28 07:06:08

CSS錨定懸停的背景？

回答

相關問題