财产前的社会联系

时间：2017-08-31 06:41:50

标签： html css pseudo-element

在此sociables部分中，当您将鼠标悬停在Icon上时，将通过将现有图标推到顶部来显示之前的属性。所以，我想将它们链接到它们的相应链接，但是要链接到之前的属性。我已经尝试在整个li中添加一个锚标签，但这就像我在这里使用flex一样弄乱了整个设计。 related link我认为会有所帮助，但事实并非如此。

感谢任何形式的帮助。

（提前致谢）

＆＃13;
＆＃13; 
.contact-sociables {
    width: 100%; 
    padding-bottom: 50px;
}

.sociables-inner {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;   
    position: relative; 
}

.sociables-inner ~ a {
    display: flex;
    flex-direction: row;
}

.contact { 
    padding: 30px 15px;
    margin: 0 15px;
    overflow: hidden;
    position: relative;
    height: 50px;
    
    border: 1px solid grey;
}

.contact i {
    position: absolute;
    top: 37%;
    left: 42%;
    transition: all 350ms linear;
    color: #fff;
}

.item1 {flex: 1;height: 15px;background: #3b5998;}
.item2 {flex: 1;height: 15px;background: #dd4b39;}
.item3 {flex: 1;height: 15px;background: #0084b4;}
.item4 {flex: 1;height: 15px;background: #8a3ab9;}
.item5 {flex: 1;height: 15px;background: #ff1493;}
.item6 {flex: 1;height: 15px;background: #c8232c;}

.contact.item1:before {
    content: "\f09a";
    color: #3b5998;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item2:before {
    content: "\f0d5";
    font-family: fontawesome;
    color: #dd4b39;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item3:before {
    content: "\f099";
    color: #0084b4;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item4:before {
    content: "\f16d";
    color: #8a3ab9;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item5:before {
    content: "\f17d";
    color: #ff1493;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item6:before {
    content: "\f0d2";
    color: #c8232c;
    background: #fff;
    width: 100%;
    padding: inherit;}


.contact:before {
    font-family: FontAwesome;
    content: "\f07a";
    position: absolute;
    top: 100%;
    left: -14px;
    transition: all 350ms linear;
}

.contact:hover i {
    top: -20px;
    transition: all 350ms ease-out;

}

.contact:hover:before {top: 0%;}
＆＃13; 
<head>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
</head>
<body>
<div class="contact-sociables">
		<div class="iva-main">
		<div class="team-heading" style="text-align: center;">Follow Us Here</div>
			<div class="sociables-inner clearfix">
				<ul style="display: flex;">
				<li class="contact item1"><i class="fa fa-facebook"></i></li>
				<li class="contact item2"><i class="fa fa-google-plus"></i></li>
				<li class="contact item3"><i class="fa fa-twitter"></i></li>
				<li class="contact item4"><i class="fa fa-instagram"></i></li>
				<li class="contact item5"><i class="fa fa-dribbble"></i></li>
				<li class="contact item6"><i class="fa fa-pinterest"></i></li>
				</ul>
			</div>
		</div>
	</div><!--contact socials-->
  </body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您可以使用以下解决方案：

.contact-sociables {
  width: 100%; 
  padding-bottom: 50px;
}
.sociables-inner {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;   
  position: relative; 
}
.sociables-inner ~ a {
  display: flex;
  flex-direction: row;
}
.contact { 
  padding: 30px 15px;
  margin: 0 15px;
  overflow: hidden;
  position: relative;
  height: 50px; 
  border: 1px solid grey;
}
.contact:before {
  background: #fff;
  width: 100%;
  padding: inherit;
  font-family: FontAwesome;
  content: "\f07a";
  position: absolute;
  top: 100%;
  left: -14px;
  transition: all 350ms linear;
}
.contact i {
  position: absolute;
  top: 37%;
  left: 42%;
  transition: all 350ms linear;
  color: #fff;
}
.contact a, .contact a:link {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.item1 {flex: 1;height: 15px;background: #3b5998;}
.item2 {flex: 1;height: 15px;background: #dd4b39;}
.item3 {flex: 1;height: 15px;background: #0084b4;}
.item4 {flex: 1;height: 15px;background: #8a3ab9;}
.item5 {flex: 1;height: 15px;background: #ff1493;}
.item6 {flex: 1;height: 15px;background: #c8232c;}

.contact.item1:before {
  content: "\f09a";
  color: #3b5998;
}
.contact.item2:before {
  content: "\f0d5";
  color: #dd4b39;
}
.contact.item3:before {
  content: "\f099";
  color: #0084b4;
}
.contact.item4:before {
  content: "\f16d";
  color: #8a3ab9;
}
.contact.item5:before {
  content: "\f17d";
  color: #ff1493;
}
.contact.item6:before {
  content: "\f0d2";
  color: #c8232c;
}
.contact:hover i {
  top: -20px;
  transition: all 350ms ease-out;
}
.contact:hover:before {top: 0%;}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="contact-sociables">
  <div class="iva-main">
		<div class="team-heading" style="text-align: center;">Follow Us Here</div>
    <div class="sociables-inner clearfix">
      <ul style="display: flex;">
        <li class="contact item1">
          <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
        </li>
        <li class="contact item2">
          <a href="https://google.com"><i class="fa fa-google-plus"></i></a>
        </li>
        <li class="contact item3">
          <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="contact item4"><a href="https://instagram.com">
          <i class="fa fa-instagram"></i></a>
        </li>
        <li class="contact item5">
          <a href="https://dribbble.com"><i class="fa fa-dribbble"></i></a>
        </li>
        <li class="contact item6">
          <a href="https://pinterest.com"><i class="fa fa-pinterest"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

答案 1 :(得分：0)

.contact-sociables {
  width: 100%; 
  padding-bottom: 50px;
}
.sociables-inner {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;   
  position: relative; 
}
.sociables-inner ~ a {
  display: flex;
  flex-direction: row;
}
.contact { 
  padding: 30px 15px;
  margin: 0 15px;
  overflow: hidden;
  position: relative;
  height: 50px; 
  border: 1px solid grey;
}
.contact:before {
  background: #fff;
  width: 100%;
  padding: inherit;
  font-family: FontAwesome;
  content: "\f07a";
  position: absolute;
  top: 100%;
  left: -14px;
  transition: all 350ms linear;
}
.contact i {
  position: absolute;
  top: 37%;
  left: 42%;
  transition: all 350ms linear;
  color: #fff;
}
.contact a, .contact a:link {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.item1 {flex: 1;height: 15px;background: #3b5998;}
.item2 {flex: 1;height: 15px;background: #dd4b39;}
.item3 {flex: 1;height: 15px;background: #0084b4;}
.item4 {flex: 1;height: 15px;background: #8a3ab9;}
.item5 {flex: 1;height: 15px;background: #ff1493;}
.item6 {flex: 1;height: 15px;background: #c8232c;}

.contact.item1:before {
  content: "\f09a";
  color: #3b5998;
}
.contact.item2:before {
  content: "\f0d5";
  color: #dd4b39;
}
.contact.item3:before {
  content: "\f099";
  color: #0084b4;
}
.contact.item4:before {
  content: "\f16d";
  color: #8a3ab9;
}
.contact.item5:before {
  content: "\f17d";
  color: #ff1493;
}
.contact.item6:before {
  content: "\f0d2";
  color: #c8232c;
}
.contact:hover i {
  top: -20px;
  transition: all 350ms ease-out;
}
.contact:hover:before {top: 0%;}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="contact-sociables">
  <div class="iva-main">
		<div class="team-heading" style="text-align: center;">Follow Us Here</div>
    <div class="sociables-inner clearfix">
      <ul style="display: flex;">
        <li class="contact item1">
          <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
        </li>
        <li class="contact item2">
          <a href="https://google.com"><i class="fa fa-google-plus"></i></a>
        </li>
        <li class="contact item3">
          <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="contact item4"><a href="https://instagram.com">
          <i class="fa fa-instagram"></i></a>
        </li>
        <li class="contact item5">
          <a href="https://dribbble.com"><i class="fa fa-dribbble"></i></a>
        </li>
        <li class="contact item6">
          <a href="https://pinterest.com"><i class="fa fa-pinterest"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

相关问题
最新问题