Question

寻找替换链接上的文本的简单解决方案：悬停。我想要一个轻微的过渡（文字来自下面），如果关闭java，只需更换常规。

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;
}

这将创建一个带边框和填充的文本按钮。在悬停时我希望文本更改为其他内容（总是更少的文本）。我希望文本在悬停时从底部向上滑动替换当前链接文本。

Answer 1

尝试使用: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>

在悬停时切换链接文本 - 转换

1 个答案: