[英]css3 hover on icon and border
HTML代碼...
<ul class="social-icon">
<li><a href="#" class="social-facebook">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook ff"></i>
</a></li>
<li><a href="#" class="social-twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="social-dribbble"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" class="social-linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="social-rss"><i class="fa fa-rss"></i></a></li>
</ul>
和CSS CODE ..
.social-icon {
text-align: center;
text-decoration: none;
}
.social-icon li {
list-style: none;
display: inline-block;
float: left;
position: relative;
}
.social-icon li a {
display: inline-block;
font-size: 18px;
line-height: 28px;
width: 35px;
text-decoration: none;
outline: none;
height: 36px;
border: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.social-icon li a:first-child {
border-left: 1px solid #000;
}
.social-icon li a .ff {
opacity: 0;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon li a .ff:hover {
opacity: 1;
background-color: #345599;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon li a i {
color: #d2d2db;
position: absolute;
top: 10px;
left: 10px;
}
問題是,當我將鼠標懸停在fb圖標上時,它的背景色很小。 邊框是我使用1px邊框的兩倍。.請幫助我...對不起,我的英語不好。
我認為您需要執行以下操作:
.social-icon li a .ff:hover
{
display: block;
width: 37px;
height: 32px;
}
.social-icon li a i
{
left: 0;
top: 0;
color: #d2d2db;
position: absolute
}
你是這個意思嗎? 將您的CSS更改為以下內容...
.social-icon {
text-align: center;
text-decoration: none;
}
.social-icon li {
list-style: none;
display: inline-block;
float: left;
position: relative;
}
.social-icon li a {
display: inline-block;
font-size: 18px;
line-height: 28px;
width: 35px;
text-decoration: none;
outline: none;
height: 36px;
border: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.social-icon li :hover{
background-color: #345599;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon li a:first-child {
border-left: 1px solid #000;
}
.social-icon li a .ff {
opacity: 0;
background-color: rgba(255, 255, 255, 0.0);
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon li a .ff:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.0);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon li a i {
color: #d2d2db;
position: absolute;
top: 10px;
left: 10px;
}
我添加了類.social-icon li:hover
我還添加了屬性background-color:rgba(255,255,255,0.0); 到類.social-icon li一個.ff:hover
我認為這更接近您想要的:
.social-icon {
text-align: center;
text-decoration: none;
}
.social-icon li {
list-style: none;
float: left;
position: relative;
height: 38px;
}
.social-icon li a{
display: inline-block;
font-size: 18px;
line-height: 28px;
width: 35px;
text-decoration: none;
outline: none;
height: 36px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.social-icon li:first-child {
border-left: 1px solid #000;
}
.social-icon li .ff {
opacity: 0;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon li .ff:hover {
opacity: 1;
background-color: #345599;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon li a i {
color: #d2d2db;
position: absolute;
padding: 10px;
top: 0px;
left: 0px;
}
.social-icon .fa-facebook {
padding-right: 15px;
}
編輯:我更新了代碼。 仍然會存在.ff
對象比<li>
容器大得多的問題。 因此,您將激活框外空間中的過渡。
您的第一個孩子選擇器不正確。 它選擇列表中的每個元素。 這就是為什么您有雙重邊界。
您的背景懸停僅選擇<i>
,而不選擇整個<a>
。 因此,它看起來很小。
這是你想要的嗎?
HTML:
<ul class="social-icon">
<li><a href="#" class="social-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#" class="social-twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="social-google-plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" class="social-dribbble">
<i class="fa fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" class="social-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="social-rss">
<i class="fa fa-rss"></i>
</a>
</li>
</ul>
CSS:
.social-icon {
text-align: center;
text-decoration: none;
}
.social-icon li {
list-style: none;
display: inline-block;
float: left;
position: relative;
}
.social-icon li a {
display: inline-block;
font-size: 18px;
line-height: 28px;
width: 35px;
text-decoration: none;
outline: none;
height: 36px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.social-icon li:first-child a {
border-left: 1px solid #000;
}
/* Facebook colour */
.social-icon li a.social-facebook:hover {
background-color: #345599;
}
.social-icon li a:hover {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon li a i {
color: #d2d2db;
position: absolute;
top: 10px;
left: 10px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.