Question

我已经在CSS中创建了一个幽灵按钮，除了用户将鼠标悬停在原始单词上之后的单词转换没有移动时，一切都运行良好。我想要“查看详细信息：在鼠标悬停时向左移动5px。这可能只需要一行代码.Thx（ - ：

.btn_action_1 {
  border: 5px solid #000 !important;
  /* Change button border color */
  color: #000 !important;
  /* Change button text color */
  font-size: 24px;
  line-height: 0;
  display: inline-block;
  padding: 10px 20px 10px;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  z-index: 3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn_action_1 span {
  left: 10px;
  position: relative;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.btn_action_1 .ico_arrow {
  background: url(ico_arrow_w.png) 0 center no-repeat;
  display: inline-block;
  height: 17px;
  width: 17px;
  position: relative;
  left: -10px;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.btn_action_1:hover {
  background: #000 !important;
  /* Change button background color when mouse over */
  color: #fff !important;
  /* Change button text color when mouse over */
}
.btn_action_1:hover span {
  left: -10px;
}
.btn_action_1:hover .ico_arrow {
  opacity: 1;
  filter: alpha(opacity=100);
  left: 0px;
}
@media (max-width: 479px) {
  .btn_action_1 {
    padding: 18px 30px;
  }
}
.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
  display: none
}

<a href="#">
  <span class="default">Product Name</span>
  <span class="hover">View Details</span>
  <i class="ico_arrow"></i>
</a>

Answer 1

HTML

<div class="btn_action_1">
  <span class="ico_arrow"></span>
  <span>some text</span>
</div>

CSS

.btn_action_1 {
  border: 5px solid #000 !important;
  /* Change button border color */
  color: #000 !important;
  /* Change button text color */
  font-size: 24px;
  line-height: 0;
  display: inline-block;
  padding: 10px 20px 10px;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  z-index: 3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn_action_1 span {
  left: 10px;
  position: relative;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.btn_action_1 .ico_arrow {
  background: url(ico_arrow_w.png) 0 center no-repeat;
  display: inline-block;
  height: 17px;
  width: 17px;
  position: relative;
  left: -10px;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.btn_action_1:hover {
  background: #000 !important;
  /* Change button background color when mouse over */
  color: #fff !important;
  /* Change button text color when mouse over */
}

.btn_action_1:hover span {
  left: -10px;
}

.btn_action_1:hover .ico_arrow {
  opacity: 1;
  filter: alpha(opacity=100);
  left: 0px;
}

@media (max-width: 479px) {
  .btn_action_1 {
    padding: 18px 30px;
  }
}

.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
  display: none
}

在这里猜测HTML代码

http://codepen.io/anon/pen/grNpPq

这似乎在chrome 52上有效。

CSS按钮的转换不起作用

1 个答案: