Question

我试图在悬停时逐渐更改元素的文字，但它不适合我。

我有这个CSS：

.author-details > div a {
    display: inline-block;
    width: 30%;
    float: none !important;
    background-color: #1ABC9C;
    color: #fff;
    padding: 2% 3% 2% 3%;
    border-radius: 7%;
    font-weight: normal;
    font-size: 16px;

    -webkit-transition: background 0.35s linear;
    -moz-transition: background 0.35s linear;
    -ms-transition: background 0.35s linear;
    -o-transition: background 0.35s linear;
    transition: background 0.35s linear;

    -webkit-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
    box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
}

.author-details > div a:after {
  content: 'Others';
}

.author-details > div a:hover {
    background-color: #5DADE2;
}

.author-details > div a:hover:after {
    -webkit-animation:fade-in 0.35s ease-in;
}

@-webkit-keyframes fade-in{
0%{
    opacity:1;
    top:0px;
}
50%{
    opacity:0;
    top:-5px;
    content: 'Me';
}
100%{
    opacity:1;
    top:-5px;
}

}

这个HTML：

<div><label>View as:&nbsp;&nbsp;</label> <a href ="#" onClick="return false" onmousedown="javascript:swapContent('con1');"></a></div>

然而，当我徘徊在元素上时，文字不会改变。我想把它改成＆＃34;我＆＃34;当我徘徊在它上面并回到＆＃34;其他＆＃34;当我没有。我怎么能这样做？

这里是一个jsFiddle：http://jsfiddle.net/2fgy912p/

Answer 1

您在hover链接时未定义要替换的文字。应该是：

.author-details > div a:after {
  content: 'Others';
}
.author-details > div a:hover:after {
  content: 'Me';
}

FIDDLE：https://jsfiddle.net/lmgonzalves/2fgy912p/3/

<强> EDIT1：

我做了一些更改来添加转换。看看这是否是您想要的：https://jsfiddle.net/lmgonzalves/2fgy912p/7/

<强> EDIT2：

我在每个元素上硬编码了top属性，这应该有效，尽管我看到工作正常。检查：https://jsfiddle.net/lmgonzalves/2fgy912p/9/

Answer 2

代码： http://codepen.io/anon/pen/Qbdvob

此效果通过使用悬停状态来设置绝对定位元素的不透明度的不透明度。并且它们具有过渡应用，因此实现了淡入和淡出效果。

Jade风格的html：

.widget
  span view as:
  input(type='checkbox',id='toggle')
  label.select(for='toggle')
    .default others
    .hovered you

Css：

* {
  margin: 0;
  padding: 0;
}
.widget {
  font-family: Open Sans;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.widget span {
  vertical-align: top;
  line-height: 30px;
}
label.select {
  user-select: none;
  cursor: pointer;
  background-color: #3ce;
  color: #fff;
  border-radius: 2px;
  width: 60px;
  vertical-align: top;
  position: relative;
  height: 30px;
  display: inline-block;
}
label.select .default,
label.select .hovered {
  transition: opacity 1s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
label.select .hovered {
  opacity: 0;
}

label.select:hover {
  background-color: #36f;
}

label.select .default {
  opacity: 1;
}
label.select .hovered {
  opacity: 0;
}
label.select:hover .default {
  opacity: 0;
}
label.select:hover .hovered {
  opacity: 1;
}

纯css在悬停时逐渐改变文本

2 个答案: