Question

我想尝试在图像上悬停多个图标显示。当鼠标悬停在图像上时，多个字体真棒图标会显示不同的链接。

但是图标变得重叠。

怎么可以避免？

这是我的代码。

HTML

<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <a href="#"><span class="fa fa-youtube"></span></a>
    <a href="#"><span class="fa fa-facebook"></span></a>
</div>

CSS

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
        display: inline-block;
}

.profile-img-container img {width:100%;} /* remove if using in grid system */


.profile-img-container img:hover {
    opacity: 0.5;
        display: inline-block;
}
.profile-img-container:hover a {
    opacity: 1; /* added */
    top: 0; /* added */
    z-index: 500;
        display: inline-block;
}
/* added */
.profile-img-container:hover a span {
    top: 50%;
    position: relative;
    left: 0;
    right: 0;
    transform: translateY(-50%);
        display: inline-block;
}
/* added */
.profile-img-container a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
         display: inline-block; /* added */
}

nu

Answer 1

您可以将它们包装在一个元素中，并将该元素置于中心而不是单个图标。

＆＃13;

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
		display: inline-block;
}

.profile-img-container img {width:100%;} /* remove if using in grid system */


.profile-img-container img:hover {
    opacity: 0.5;
		display: inline-block;
}
.profile-img-container:hover .icons {
    opacity: 1; /* added */
    z-index: 500;
}
.icons {
  opacity: 0;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

/* added */
.profile-img-container a {
    color: inherit;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
  <div class="icons">
  <a href="#"><span class="fa fa-youtube fa-5x"></span></a>
    <a href="#"><span class="fa fa-facebook fa-5x"></span></a>
  </div>
    
</div>

＆＃13;

Answer 2

将图标放在容器中并使用正确的z-index使它们居中可以解决问题。见下文。

＆＃13;

.profile-img-container {
  position: relative;
  display: inline-block;
  /* added */
  overflow: hidden;
}

.profile-img-container img {
  width: 100%;
  position: relative;
  z-index: 2
}


/* remove if using in grid system */

.profile-img-container img:hover {
  opacity: 0.5;
  display: inline-block;
}

.profile-img-container:hover .icon-cont {
  opacity: 1;
}

.icon-cont {
  text-align: center;
  position: absolute;
  opacity: 0;
  top: 50%;
  transition: .4s;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="profile-img-container">
  <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
  <div class="icon-cont">
    <a href="#"><span class="fa fa-youtube fa-5x"></span></a>
    <a href="#"><span class="fa fa-facebook fa-5x"></span></a>
  </div>
</div>

＆＃13;

怎么可以避免重叠？

2 个答案: