將鼠標懸停在鼠標上而不是顯示鼠標移出

我試圖讓我的網頁上的圖像顯示不同的顏色，當我將鼠標懸停在它們上面時。相反，發生的事情是圖像具有這種透明顏色，並在我將鼠標懸停在其上時顯示原始圖像。將鼠標懸停在鼠標上而不是顯示鼠標移出

請有人可以幫助解決這個：

.service-style-1 .service-perview figcaption { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -o-border-radius: 50%; 
    -ms-border-radius: 50%; 
    -khtml-border-radius: 50%; 
    border-radius: 50%; 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    -ms-transition: all 0.2s linear; 
    -khtml-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
    top: 0; 
    right: 0; 
    z-index: 1; 
    border: 104px solid rgba(255, 109, 132, 0.5); 
} 

.service-style-1:hover .service-perview figcaption { 
    border-width: 8px; 
}

HTML：

<div class="row"> 
    <div class="carousel-services carousel-col-3 carousel"> 
    <div class="service-wrapper carousel-item"> 
     <div class="service service-style-1"> 
     <h3 class="service-title"><a href="single-product.html">Product</a></h3> 
     <figure class="service-perview"> 
      <img src="images1.jpg" alt="Cakes"> 
      <figcaption></figcaption> 
     </figure> 
     <p class="service-description">Product1</p> 
     </div> 
     <!-- end of service --> 
    </div> 
    <!-- end of service wrappper --> 
    </div> 
</div>

來源

2016-04-19 Sam

請發佈你的html以及 – LGSon

@LGSon我已經添加了它，謝謝 – Sam

你能澄清一下這個問題嗎？也許考慮在[JSFiddle.net]（http://jsfiddle.net）上分享演示？ – Gofilord

我已經通過使邊框固定這8像素，然後懸停使其104px

來源

2016-04-19 19:26:54 Sam

將鼠標懸停在鼠標上而不是顯示鼠標移出

回答

相關問題