使用不同懸停大小的CSS懸停問題

現在我正在做的是有一個文本導航，但然後在懸停仍保持文本，但使用圖像作爲背景。使用不同懸停大小的CSS懸停問題

因爲文字大小不等&背景圖像是一個大小這已經成爲一個問題，因爲我只有597px內的導航區域&我也希望每個導航選擇之間的間距相同數量的工作。

我想這個例如..

enter image description here

，但目前我正在此：

enter image description here

淨資產值的背景圖像在寬87px，所以很明顯它的包裝，因爲我們沒有足夠的空間。但是，由於每個導航項都設置爲87px，因此我們最終還是會在每個導航項之間留出不同的空間。

所以我想知道是否有任何干淨的方式做我想要的東西，而不使用javascript &沒有導航項時跳過其他人？

我試過把不同的寬度放在不同的狀態，但導航只是跳轉&看起來很糟糕。

任何想法做我想要的？

如果你想看到我目前的HTML & CSS它的下面：

HTML：

<div class="nav_wrapper"> 
    <ul class="nav"> 
     <li><a href="index.php">HOME</a></li> 
     <li><a href="about.php">ABOUT US</a></li> 
     <li><a href="services.php">SERVICES</a></li> 
     <li><a href="our_process.php">OUR PROCESS</a></li> 
     <li><a href="portfolio.php">OUR WORK</a></li> 
     <li><a href="">BLOG</a></li> 
     <li><a href="free_quote.php">FREE QUOTE</a></li> 
     <li><a href="contact_us.php">CONTACT US</a></li> 
    </ul> 
    <!-- Nav Ends --> 
    <div class="contentClear"></div> 
</div> 
<!-- Nav Wrapper Ends -->

CSS：

#header .nav_wrapper { 
    float: left; 
    width: 597px; 
    margin: 30px 0 0 50px; 
} 

#header .nav_wrapper .nav { 
    list-style-type: none; 
    list-style-image: none; 
} 

#header .nav_wrapper li { 
    float: left; 
    height: 23px; 
    min-width: 87px; 
    font-family: "Zurich Cn BT", Tahoma; 
    font-size: 12px; 
    text-align: center; 
} 

ul.nav li a, ul.nav li a:visited, ul.nav li a:focus { 
    display: block; 
    line-height: 23px; 
    color: #764422; 
    text-decoration: none; 
} 

ul.nav li a:hover, ul.nav li a:active { 
    color: #fff; 
    text-decoration: none; 
    background-image: url(../images/nav-bg.png); 
}

來源

2011-04-26 Brett

你想要的總大小的百分比1/8間距每個L1的大小你的菜單居中？ – Hristo 2011-04-26 17:33:34

使用兩個圖像作爲背景圖像一個大按鈕向右擴展1個左圓角......用標籤添加span標籤或使用li作爲第二個圖像.. – Yasir 2011-04-26 18:04:08

@Hristo不，不是全部。只是背景圖片中的每個導航按鈕。 – Brett 2011-04-26 18:49:17

什麼，我會做的是樣式每個<li>「 s寬度到背景圖像的大小（即87px）。如果空間確實成爲問題，那麼我會創建幾個不同的背景圖像（例如70px，87px和95px），並相應地設置各自的<li>的寬度。這是一個簡單的解決方案，運行良好，不會添加任何js複雜化。

來源

2011-04-26 17:35:52 Mauro

我曾想過，如有必要可能必須走這條路。 :) – Brett 2011-04-26 18:14:17

需要圖片？如果沒有，你可以嘗試使用CSS3（或即過濾器作爲備用）：

background-color: #FCC051; 
    background-image: -moz-linear-gradient(top, #FCC051, #FAA200); /* FF3.6 */ 
    background-image: -ms-linear-gradient(top, #FCC051, #FAA200); /* IE10 */ 
    background-image: -o-linear-gradient(top, #FCC051, #FAA200); /* Opera 11.10+ */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FCC051), to(#FAA200)); /* Saf4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, #FCC051, #FAA200); /* Chrome 10+, Saf5.1+ */ 
    background-image: linear-gradient(top, #FCC051, #FAA200); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FCC051', EndColorStr='#FAA200'); /* IE6–IE9 */

例子可以在這裏找到：http://fiddle.jshell.net/Shaz/7X3qw/2/

除非你需要支持> IE6，這應該工作。 :)

來源

2011-04-26 17:56:27 Shaz

非常好的傢伙。 – David 2011-04-26 18:01:09

CSS 3作爲後備？ – 2011-04-26 18:03:54

非常感謝您的支持......絕對是一個選擇，如果沒有其他解決辦法與圖像。 – Brett 2011-04-26 18:14:46

這是你的修復，只需要插入背景圖片 http://jsfiddle.net/samccone/7zELD/

background: url('path here') center center no-repeat transparent;

我等於用

來源

2011-04-26 18:02:21 samccone

謝謝.....但我不知道還有什麼更改在我的CSS讓它工作。我試着看看你的示例CSS代碼，但似乎沒有任何工作適合我的情況。 – Brett 2011-04-26 18:13:52

#header .nav_wrapper li a float：left; height：23px; 寬度：12.5％; font-family：「Zurich Cn BT」，Tahoma; font-size：10px; } – samccone 2011-04-26 18:18:04

不起作用.....最終包裝每個導航元素。也許我必須給每一個不同的尺寸。 – Brett 2011-04-26 18:53:46

使用不同懸停大小的CSS懸停問題

回答

相關問題