Question

我希望能够定位我的按钮（id=#btn1，#btn2等）和当我将他们的不透明度改为.60时。我现在的问题是每个按钮悬停时显示的<span>文本也会发生变化它的不透明度。你可以帮我解决这个问题吗？在每个按钮上，显示的文本不会改变它的不透明度。

如果你能指出我合并所有这些的方法，那也很棒按钮所以我不必在底部附近重复我的代码。

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

您应该定位背景颜色。

.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;
}

Answer 2

那是不可能的。不透明度也会影响文本。如果您想要相同的效果，请尝试以background-color格式更改rgba，而不是不透明度。

悬停效果但禁用文字效果

2 个答案: