2014-11-06 37 views
0

我很好奇,如果可以让我的悬停过渡效果在此标记中的所有内容上都有效,那么标记中的文本会变得非常有趣。如果这种效果是因为invisiouned标签的按钮将逐渐消失,但在按钮中的名称将保持到工作..将属性转换为除标记内的文本以外的所有内容

这里是我的代码迄今:

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> 

回答

1

以下是应该如何完成的:不要更改元素的不透明度,请使用rgba颜色格式。这种颜色格式允许您除了设置颜色之外还设置不透明度,因此您可以设置背景不透明度而不是元素不透明度。因此,在主样式(悬停之前的风格),有rgba(234,234,234,1)而不是#EAEAEAbackground-color,然后在悬停的风格,有rgba(143,143,143,0.1)代替#8F8F8F

+0

谢谢你帮我出去! – user3736526 2014-11-07 00:04:28

+0

我爱帮忙!另外,我看到你对于stackoverflow很新颖,当一个答案完全回答你的问题时,请点击刚才在投票计数下的小绿色“检查”。这标志着答案被“接受”,给予答案 - 呃15声望并给你2 – Markasoftware 2014-11-07 00:21:56

相关问题