Question

我很好奇是否有可能让我的悬停过渡效果对此标记中的所有内容都有效。如果这个效果像invissouned一样工作，标签的按钮会消失，但按钮内的名字会保留..

到目前为止，这是我的代码：

ul.nav a{
    z-index: 99999;
    position: relative;
    right: 20px;
    bottom: -5px;
    font-family:  "Trebuchet MS", Helvetica, sans-serif;
    display: block;
    border: 2px solid #000;
    border-radius: 5px;
    padding: 9px 15px 20px 15px;
    margin-right: 5px;
    background-color: #EAEAEA;
    text-decoration: none; 
    text-align: center;
    color: #333;
    transition: opacity .5s ease-in-out;
}

悬停属性：

ul a:hover{
    background-color: #8F8F8F;
    opacity: .10;
    transition: background-color opacity 1s ease-out;
}

       <ul class ="nav">
       <li><a href="http://www.google.com">Home</a></li>
       <li><a href="http://www.gmail.com">Portfolio</a></li>
       <li><a href="http://www.facebook.com">About</a></li>
       <li><a href= "http://www.Flickr.com">Blog</a></li>
       <li class="floatr"><a href="http://www.flickr.com">Contact</a></li>
    </ul>

Answer 1

以下是它应该如何完成：使用rgba颜色格式，而不是更改元素的不透明度。此颜色格式允许您除了颜色之外还设置不透明度，因此您可以设置背景不透明度而不是元素不透明度。因此，在主要样式（悬停前的样式）中，对rgba(234,234,234,1)使用#EAEAEA而不是background-color，然后在悬停样式中，使用rgba(143,143,143,0.1)代替{ {1}}

将属性转换为除标记内的文本之外的所

1 个答案: