html - 过渡属性到标签内除文本以外的所有内容

Question

我很好奇是否可以让我的悬停过渡效果作用于此标签中的所有内容(除了标签内的文本)。如果此效果按不可见的方式工作，选项卡的按钮将消失，但按钮内的名称将保留。

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

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) 而不是 #8F8F8F