Question

我有一个加号图标，它会悬停在幻灯片上，以添加到购物车按钮。我想使用按钮单击来实现相同的功能。我已经尝试过CSS，但是它不起作用。 JQuery可以实现吗？

HTML

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

CSS

.add-cart-a
{
width: 181px; 
}
.add-cart-new
{
 height: 56px; 
}
.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: 0.5em;
  min-width: 2.5em;
  max-width: 2.5em;
  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:5px;
  right:0.3px;
} 
.text-add-cart
{
  position:relative;
  right:7px;
  bottom:12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

这是我尝试过的代码：JSFiddle

Answer 1

如果您希望将此作为仅CSS的解决方案，则可以使用复选框和focus伪类，这可能有点过大。只需使用少量JS即可轻松完成。

$('.add-cart-new').click(function() {
  $(this).toggleClass('is-open');
});

然后可以将.socialIcons .add-cart-new:hover a替换为.socialIcons .add-cart-new.is-open a。

将图标幻灯片切换到点击按钮上的添加购物车按钮

1 个答案: