悬停时SVG背景图像奇怪的过渡行为

Question

我有一个以 svg 为背景的按钮。该:hover选择器工作正常，但当我给它一个过渡，按钮的第一变小，然后跳回到原来的大小。我如何停止这种行为？

这是我的代码：

a {
  width: 250px;
  display: block;
  color: rgba(0, 0, 0, .9);
  text-decoration: none
}
.prod-ueber .cta-wrapper {
  position: absolute;
  left: 310px;
  width: 100px;
  top: 45px;
  z-index: 5
}
.info-btn,
.korb-btn {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100%;
  float: left;
  transition: background .4s ease;
}
.info-btn {
  background-image: url(http://imgh.us/info-btn.svg);
}
.korb-btn {
  background-image: url(http://imgh.us/korb-btn.svg);
  margin-left: 12px;
}
.info-btn:hover,
.info-btn:active,
.info-btn:focus {
  background-image: url(http://imgh.us/info-btn_h.svg);
}
.korb-btn:hover,
.korb-btn:active,
.korb-btn:focus {
  background-image: url(http://imgh.us/korb-btn_h.svg);
}

<a href="#">
  <div class="prod-ueber">
    <img src="http://dummyimage.com/" height="290" width="426" alt="Minze" class="img-responsive">
    <h3 class="Artikelname">Malve</h3>
    <small>Description</small>
    <hr>
    <h5 class="preis">€ 1,79</h5>
    <div class="cta-wrapper">
      <a href="#" class="info-btn"></a>
      <a href="#" class="korb-btn"></a>
    </div>
  </div>
  <!-- produkt -->
</a>

Answer 1

您可以通过添加元素background-image来使用解决方法pseudo

\n\n

\r\n

\r\n

a {\r\n  width: 250px;\r\n  display: block;\r\n  color: rgba(0, 0, 0, .9);\r\n  text-decoration: none\r\n}\r\n.prod-ueber .cta-wrapper {\r\n  position: absolute;\r\n  left: 310px;\r\n  width: 100px;\r\n  top: 45px;\r\n  z-index: 5\r\n}\r\n.info-btn,\r\n.korb-btn {\r\n  width: 50px;\r\n  height: 50px;\r\n  background-repeat: no-repeat;\r\n  background-size: 100%;\r\n  float: left;\r\n  position: relative;\r\n  overflow:hidden;\r\n}\r\n.info-btn {\r\n  background-image: url(http://imgh.us/info-btn.svg);\r\n}\r\n.korb-btn {\r\n  background-image: url(http://imgh.us/korb-btn.svg);\r\n  margin-left: 12px;\r\n}\r\n.info-btn:before,\r\n.korb-btn:before {\r\n  content: \'\';\r\n  width: 100%;\r\n  height: 100%;\r\n  position: absolute;\r\n  background-size: 100% auto;\r\n  opacity: 0;\r\n  transition: .4s ease;\r\n}\r\n.info-btn:before {\r\n  background-image: url(http://imgh.us/info-btn_h.svg);\r\n}\r\n.korb-btn:before {\r\n  background-image: url(http://imgh.us/korb-btn_h.svg);\r\n}\r\n.info-btn:hover:before,\r\n.info-btn:active:before,\r\n.info-btn:focus:before {\r\n  opacity: 1;\r\n}\r\n.korb-btn:hover:before,\r\n.korb-btn:active:before,\r\n.korb-btn:focus:before {\r\n  opacity: 1;\r\n}

\r\n

<a href="#">\r\n  <div class="prod-ueber">\r\n    <img src="http://dummyimage.com/" height="290" width="426" alt="Minze" class="img-responsive">\r\n    <h3 class="Artikelname">Malve</h3>\r\n    <small>Description</small>\r\n    <hr>\r\n    <h5 class="preis">\xe2\x82\xac 1,79</h5>\r\n    <div class="cta-wrapper">\r\n      <a href="#" class="info-btn"></a>\r\n      <a href="#" class="korb-btn"></a>\r\n    </div>\r\n  </div>\r\n</a>

\r\n

\r\n

\r\n

\n