懸停效果，但禁用文字效果

Question

我希望能夠針對我的按鈕（id=#btn1,#btn2 ..等）和 當我不透明度更改爲.60。我現在的問題是，每個按鈕被徘徊時顯示的文本也會改變其不透明度。你能幫我解決這個問題嗎？當我將 懸停在每個按鈕上時，顯示的文本不會改變它的不透明度。

如果你能指點我合併所有那些 按鈕，那麼這將是非常好的，所以我不必在代碼底部重複我的代碼。

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { 
    margin: 0; padding: 0; border: 0; 
} 

body { 
    background: url(../img/filter.jpg); 
} 

.nav { 
    width: 1000px; margin: 250px auto; 
} 

.nav ul { 
    list-style: none; overflow: hidden; position: relative; 
} 
    .nav ul li { 
     float: left; margin: 0 20px 0 0; 
    } 
     .nav ul li a { 
      display: block; width: 120px; height: 120px; 
     } 
      .nav #btn1 { 
       background-image: url(../img/icons/home80.png); 
       background-position: 28px 28px; 
       background-repeat: no-repeat; 
      } 
      .nav #btn2 { 
       background-image: url(../img/icons/truck90.png); 
       background-position: 28px 28px; 
       background-repeat: no-repeat; 
      } 
      .nav #btn3 { 
       background-image: url(../img/icons/note80.png); 
       background-position: 28px 28px; 
       background-repeat: no-repeat; 
      } 
      .nav #btn4 { 
       background-image: url(../img/icons/vallet80.png); 
       background-position: 28px 28px; 
       background-repeat: no-repeat; 
      } 
       .nav ul li a span { 
        font: 50px "Dosis", sans-serif; text-transform: uppercase; 
        position: absolute; left: 580px; top: 29px; 
        display: none; 
       } 
        .nav ul li a:hover span { 
         display: block; 
         color: #fff; 
         opacity: 1; 
        } 
       /* 
       .nav nav ul li:nth-child(1) a span { 

       } 
       .nav nav ul li:nth-child(2) a span { 

       } 
       .nav nav ul li:nth-child(3) a span { 

       } 
       .nav nav ul li:nth-child(4) a span { 

       }*/ 
.nav #btn1:hover, 
.nav #btn1:focus { opacity: .60; } 
.nav #btn2:hover, 
.nav #btn2:focus { opacity: .60; } 
.nav #btn3:hover, 
.nav #btn3:focus { opacity: .60; } 
.nav #btn4:hover, 
.nav #btn4:focus { opacity: .60; } 
.nav ul li a span:hover, 
.nav ul li a span:focus { opacity: 1; } 

.jumbotron h1 { 
    width: 1000px; margin: -580px auto; 
    font: 70px "Dosis", sans-serif; 
    } 
.jumbotron .container h2 { 
    width: 1000px; margin: 800px auto; 
    font: 32px "Dosis", sans-serif; 
    text-shadow: black 0.1em 0.1em 0.2em; 
    color: #fff; 
    } 

Answer 1

這是不可能的。不透明度也會影響文字。如果需要相同的效果，請嘗試更改background-color格式的rgba格式，而不要使用不透明度。

Answer 2

您應該定位背景顏色。

.nav #btn3 { 
    background-color: rgba(0,0,0,0.6);// transparent black. 
    } 

但是由於您使用的圖像，你可以欺騙系統。

1）把戲1 - ：使用兩個圖像，一個透明和一個不透明。透明的懸停。

2）技巧2 - ：您可以添加span標籤並在其上顯示不透明度。

<ul> 
    <li id="btn3"> 
    <a href=""> 
    <span>Your Link text here</span> 
    </a> 
    </li> 
</ul> 

將應用此規則給它

.nav li#btn3 span { 
    opacity: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #000; /*My is black, you can use any color. black & white are best*/ 
} 

.nav li#btn3:hover span { 
    opacity: 0.6; 
}