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

来使用变通方法

＆＃13;

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;
  position: relative;
  overflow:hidden;
}
.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:before,
.korb-btn:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100% auto;
  opacity: 0;
  transition: .4s ease;
}
.info-btn:before {
  background-image: url(http://imgh.us/info-btn_h.svg);
}
.korb-btn:before {
  background-image: url(http://imgh.us/korb-btn_h.svg);
}
.info-btn:hover:before,
.info-btn:active:before,
.info-btn:focus:before {
  opacity: 1;
}
.korb-btn:hover:before,
.korb-btn:active:before,
.korb-btn:focus:before {
  opacity: 1;
}

＆＃13;

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

＆＃13;

Answer 2

您可以在svg元素本身中设置，而不是设置图像的背景。它可能会让你的html更大，但你可以在 template中设置＆lt; svg＆gt; 。

首先让我们使用svg代替背景。（svg是xhtml所以你可以把它粘贴在html中）

#Ebene_1 circle {
  transition: fill .4s, stroke .4s;
}
#Ebene_1:hover circle {
  fill: #ffe;
}
#Ebene_1:hover path {
  fill: #b61910;
}

<p>We can use the svg inside our html :D</p>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60.1px" height="60.1px" viewBox="0 0 60.1 60.1">
  <circle fill="#B61910" stroke="#B61910" stroke-width="1.5" stroke-miterlimit="10" cx="30.1" cy="30.1" r="29.3" />
  <path fill="#FFFFFF" d="M32.3,14c1.6,0,3.2,1.6,3.2,3.2S33.9,22,30.7,22c-1.6,0-3.2-1.6-3.2-3.2C29.2,15.6,30.7,14,32.3,14z
				 M26,45.8c-1.6,0-3.2-1.6-1.6-6.4l1.6-7.9c0-1.6,0-1.6,0-1.6s-3.2,1.6-4.8,1.6v-1.6c4.8-3.2,9.5-4.8,11.1-4.8
				c1.6,0,1.6,1.6,1.6,4.8l-1.6,7.9c0,1.6,0,1.6,0,1.6s1.6,0,3.2-1.6l1.6,1.6C32.3,44.2,27.6,45.8,26,45.8z" />
  <rect x="8.2" y="14.2" fill="none" width="36.5" height="31.8" />
</svg>
<p>and it wil :hover. <br> Added some transitions to.</p>

Answer 3

如果使用带有background-image的转换，则还必须显式声明各种背景属性例如 { backgroundRepeat：＆＃39; no-repeat＆＃39;， backgroundSize：＆＃39; 30px 30px＆＃39;， backgroundPosition：＆＃39; 0px 0px＆＃39; }

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

3 个答案: