I'm wondering if it's possible to apply a hover transition effect to everything in this tag except the text within it. The desired effect is for the button to fade away while the text remains visible.
Below is the code I have written so far:
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;
}
And here is the hover property:
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>