javascript - 悬停时图像下方的艺术文字

Question

我有一些社交图标。它们在悬停时围绕中心点旋转 360 度。我想在悬停时将文本放在这些图标下方。我不确定该怎么做。

目前我有:

<center>
    <div class="ol-md-3 col-md-offset-5 text-center ">
    <a class="inline_block" href="#" target="_blank"><div class="social-roll linkedin"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/linkedin.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll facebook"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/facebook.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll github"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/github.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll email"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/email.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll skype"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/skype.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll soundcloud"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/soundcloud.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll spotify"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/spotify.png?raw=true" width=48 height=48/></div></a>
</div>
</center>

<style>
.inline_block{
   display: inline-block;;
 }

.social-roll {
    margin: 7px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-roll.facebook:hover {
   background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}


.social-roll.linkedin:hover {
   background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
   transform:rotate(360deg);
}

.social-roll.github:hover {
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.social-roll.email:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
  }

.social-roll.skype:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
 }

.social-roll.soundcloud:hover {
  background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 transform:rotate(360deg);
}

.social-roll.spotify:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
  transform:rotate(360deg);
 }
    </style>

示例如下:https://jsfiddle.net/prathprabhudesai/ga2evj7a/

我希望在图标下方显示文本。如下图所示。

谁能帮帮我。提前致谢。

Answer 1

首先假设您实际上不需要为每个按钮复制 :hover css，如果效果总是一样的话，因为 css 样式将仅应用于当前具有的元素状态 :hover，所以我清理了一些你的 css，删除了一些不必要的行。

此外，由于您必须添加一个新元素(文本)并且您希望它在您越过图标时改变样式，所以我将所有内容都包装到一个父元素中，给它一个名为“social-group”的类。

我删除了一些图标只是为了让代码看起来更简洁。您可以按照示例将它们放回去。您可能还想对“.social-text”类应用一些样式。

<style>
.inline_block{
   display: inline-block;;
 }

.social-roll {
    margin: 7px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-group:hover .social-roll {
   background-color: rgba(255,255,255,0.8);
   box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}

.social-text {
    visibility: hidden;
}

.social-group:hover .social-text {
    visibility: visible;
}

</style>


<center>
    <div class="ol-md-3 col-md-offset-5 text-center ">
        <a class="inline_block social-group" href="#" target="_blank">
            <div class="social-roll linkedin">
                <img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/linkedin.png?raw=true" width=48 height=48/>
            </div>
            <div class="social-text">Linkedin</div>
        </a>
        <a class="inline_block social-group" href="#" target="_blank">
            <div class="social-roll facebook">
                <img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/facebook.png?raw=true" width=48 height=48/>
            </div>
            <div class="social-text">Facebook</div>
        </a>
    </div>
</center>