Question

我怀疑在代码中当光标放置在该图标中时，它应该向右悬停，但是我的要求是，与其向右切换，不如向左切换。供我参考

所以请帮助我做到这一点。

.socialIcons .add-cart-new {
  background-color: yellow;
  list-style: none;
  display: inline-block;
  margin: 4px;
  border-radius: 2em;
  overflow: hidden;
}

.socialIcons .add-cart-new a {
  display: block;
  padding: 8px;
min-width: 56px;
max-width: 56px;
  height: 2.28571429em;
  white-space: nowrap;
  line-height: 1.5em; /*it's working only when you write text with icon*/
  transition: 0.5s;
  text-decoration: none;
  font-family: arial;
  color: #fff;
}

.socialIcons .add-cart-new i {
  margin-right: 0.5em;
}

.socialIcons .add-cart-new:hover a {
  max-width: 205px;
  padding-right: 1em;
}

.socialIcons .add-cart-new {
  background-color: #EC7F4A;
}
.socialIcons .add-cart-new a
{
  position:relative;
  bottom:4px;
  right:0.3px;
}

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <div class="socialIcons">
            <div class="add-cart-new">
              <a href="" class="add-cart-a">
                <i class="fa-3x fa fa-plus-circle"></i>
                <span class="text-add-cart">Add to cart</span>
              </a>
            </div>
          </div>

Answer 1

如果您将w3schools示例从注释更改为问题（link for reference），以将开关从右移到左，然后将其从右移到左，则如下所示：

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  right: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #EC7F4A;
}

input:focus + .slider {
  box-shadow: 0 0 1px #EC7F4A;
}

input:checked + .slider:before {
  -webkit-transform: translateX(-26px);
  -ms-transform: translateX(-26px);
  transform: translateX(-26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

也许您可以以此为基础？

Answer 2

我不确定我是否理解正确，但这是我所做的：
（注释在代码内）

编辑：当我阅读您的评论时，我终于明白了您的意思。为此，只需反转元素和翻译即可。

此外，作为额外的奖励。我创建了this fully customisable button in codepen。如果您愿意，请查看！（更改scss变量func getCurrentDateTime() { let now = Date() let formatter = DateFormatter() formatter.locale = Locale(identifier: "fr_FR") formatter.dateFormat = "EEEE dd MMMM YYYY" labelDate.text = formatter.string(from: now) labelDate.font = UIFont(name: "HelveticaNeue-Bold", size: 12) labelDate.textColor = UIColor.lightGray let text = formatter.string(from: now) labelDate.text = text.uppercased() }来反转文本，在这种情况下，它使用$text-direction来反转其元素。）

flex-direction: row-reverse

.socialIcons {
  /* Scale button by changing font-size value */
  font-size: 1.1em;
}

.socialIcons .add-cart-new {
  background-color: yellow;
  list-style: none;
  display: inline-block;
  margin: 4px;
  border-radius: 2em;
  overflow: hidden;
}

.socialIcons .add-cart-new a {
  position: relative;
}

.socialIcons .add-cart-new input{
  /* HIDE Checkbox */
  position: absolute;
  left: -1px;
  top: -1px;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.socialIcons .add-cart-new a > label {
  /* DISPLAY FLEX and align all items in the center vertically */
  display: flex;
  align-items: center;
  /* change cursor */
  cursor: pointer;
  /* removed min-width (results in ugly extra width)*/
  max-width: 3em;
  padding: 0.2em 0.4em;
  height: auto;
  white-space: nowrap;
  line-height: 1.5em;
  text-decoration: none;
  font-family: arial;
  color: #fff;
  transition: all 0.3s ease-in;
}

.socialIcons .add-cart-new:hover a > label, .socialIcons .add-cart-new a > input:checked + label {
  /* Expand if hovered or checked */
  max-width: 12em;
}

/* WHEN UNCHECKED */

.socialIcons .add-cart-new a > input + label > i {
  /* initial margin 0 */
  margin-left: 0;
  transition: all 0.3s ease-in-out;
}

.socialIcons .add-cart-new a > input:not(:checked) + label > span{
  /* initially invisible */
  position: relative;
  max-width: 0;
  transition: all 0.3s ease-in-out;
  animation: 0.5s hideNpop ease-in-out;
}

.socialIcons .add-cart-new a > input + label > span:after{
  /* Text (initially invisible) */
  content: 'Add to cart';
  /* text to caps as in example image */
  text-transform: uppercase;
  opacity: 0;
  max-width: 0;
  transition: all 0.3s ease-in-out;
}

.socialIcons .add-cart-new:hover a > input + label > i{
  /* Add margin to icon */
  margin-left: 0.5em;
}

.socialIcons .add-cart-new:hover a > input + label > span{
  /* span visible */
  opacity: 1;
  max-width: 12em;
}

.socialIcons .add-cart-new:hover a > input + label > span:after{
  /* Text (make visible) and add padding to the right */
  opacity: 1;
  max-width: 200px;
  padding-left: 1em;
}

.socialIcons .add-cart-new input + label {
  /* Initial background-color */
  background-color: #EC7F4A;
}

/* WHEN CHECKED (same styles when hovering an unchecked except for the color and text)*/

.socialIcons .add-cart-new a > input:checked + label > i {
  margin-left: 0.5em;
  /* Move the icon from right to the left */
  -webkit-transform: translateX(-2.05em) rotate(45deg);
  -ms-transform: translateX(-2.05em) rotate(45deg);
  transform: translateX(-2.05em) rotate(45deg);
}

.socialIcons .add-cart-new a > input:checked + label > span{
  opacity: 1;
  max-width: 12em;
  /* Move the text from left to the right */
  -webkit-transform: translateX(3em);
  -ms-transform: translateX(3em);
  transform: translateX(3em);
}

.socialIcons .add-cart-new a > input:checked + label > span:after{
  /* Change text */
  content: 'Added!';
  opacity: 1;
  max-width: 6em;
  padding-left: 1em;
  animation: 0.5s hideNpop ease-in-out;
}

.socialIcons .add-cart-new input:checked + label {
  /* Checked background-color */
  background-color: #82ca9c;
}


@keyframes hideNpop {
  /* Real quick fade out and slower fade in*/
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

如果您有任何疑问，请随时提问！干杯！

左右滑动按钮

2 个答案: