悬停时切换链接文本-过渡 [英] switching out link text on hover - transition

问题描述

寻找一种简单的解决方案来替换:Hover上的链接上的文本.我想要一个轻微的过渡(文本从下面出现)，如果关闭了Java，只需替换常规.

Looking for a simple solution to replacing text on a link on :Hover. I want a slight transition (text comes up from underneath) and just replace regular if java is turned off.

HTML

<div class="bot-text">
  <a href="">Go here</a>
  <a href="">Or go here</a>
</div>

CSS

.bot-text a  {
  font: 600 15px/20px 'Open Sans', sans-serif;
  color: #383737;
  position: relative;
  display: inline-block;
  border: 2px solid #383737;
  padding: 25px;
  margin: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

这将创建带有边框和填充的文本按钮.悬停时，我希望文本更改为其他内容(将始终是更少的文本).我希望该文本替换为悬停时从底部向上滑动的当前链接文本.

This creates a text button with a border and padding. on hover I want the text to change to something else (will always be less text). I want the text to replace the current link text with a slide up from the bottom on hover.

推荐答案

尝试利用:after伪元素

.bot-text a  {
  font: 600 15px/20px 'Open Sans', sans-serif;
  color: #383737;
  position: relative;
  display: inline-block;
  border: 2px solid #383737;
  padding: 25px;
  margin: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.bot-text a:hover {
  color:transparent;
}

.bot-text a:hover:after {
  opacity:0;
  position:absolute;
  left:40%;
  color:blue !important;
  content:"abc";
  animation: slideup 1s ease-in 0s forwards;
  -moz-animation: slideup 1s ease-in 0s forwards;
  -webkit-animation: slideup 1s ease-in 0s forwards;
}

@keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

@-moz-keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

@-webkit-keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

<div class="bot-text">
  <a href="">Go here</a>
  <a href="">Or go here</a>
</div>

这篇关于悬停时切换链接文本-过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！