禁用懸停在鏈接上，背景圖像懸停效果導致閃爍

我目前正在處理具有懸停效果的圖像。將鼠標懸停在圖像上時，鏈接將變得可見。圖像對懸停有模糊效果。問題在於當您將鼠標懸停在鏈接上時（圖像頂部可見），圖像開始閃爍（在模糊和未模糊之間）。禁用懸停在鏈接上，背景圖像懸停效果導致閃爍

一些代碼：

$(document).ready(function() { 
 

 
    $(".realisatieslink1").hide(); 
 
    $(".realisatiesafb1").mouseenter(function() { 
 
    $(".realisatieslink1").show(); 
 
    }); 
 
    $(".realisatiesafb1").mouseleave(function() { 
 
    $(".realisatieslink1").hide(); 
 
    }); 
 

 
});

.realisatieslink1 a { 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    font-size: 15px !important; 
 
    border: 1px solid white; 
 
    color: white !important; 
 
} 
 
.realisatieslink1 { 
 
    margin-top: -120px; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 
.editing .realisatieslink1 { 
 
    margin-top: 0px; 
 
} 
 
.realisatieslink1 p { 
 
    margin-bottom: 0px; 
 
}

<div class="col-sm-3"> 
 

 
    <div class="ccm-custom-style-container ccm-custom-style-slide31-83 realisatiesafb1 realisatieafb"> 
 
    <a href="http://grafomantestsite2.be/index.php/realisaties"> 
 
     <img src="http://grafomantestsite2.be/application/files/6314/4161/6181/realisatie1.png" alt="realisatie1.png" width="401" height="269" class="ccm-image-block img-responsive bID-83"> 
 
    </a> 
 
    </div> 
 
    <div class="ccm-custom-style-container ccm-custom-style-slide31-85 realisatieslink1" style="display: none;"> 
 
    <p><a href="http://grafomantestsite2.be/index.php/realisaties">BEKIJK REALISATIES</a> 
 
    </p> 
 
    </div> 
 
</div>

有沒有一種方法，使閃爍停止？

下面是一些截圖：

編輯：我在CMS concrete5這限制了編輯的HTML我的能力的工作。剛剛發現，Firefox的圖像效果不會閃爍，它在Chrome和Safari瀏覽器中都有。

編輯：圖像CSS：

.realisatieafb { 
 
    width: 100%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.realisatieafb img { 
 
    position: absolute; 
 
    left: -100%; 
 
    right: -100%; 
 
    top: -100%; 
 
    bottom: -100%; 
 
    margin: auto; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
}

來源

2015-09-08 Jacob

試試這個：

.realisatieslink1 { 
    margin-top: -120px; 
    /*z-index: 1;*/ 
    position: absolute; 
    display:none; 
} 
.realisatieslink1:hover { 
    display:block; 
} 
.realisatieafb img{ 
    position:relative; 
} 

$(document).ready(function() { 
    $(".realisatiesafb1").mouseenter(function() { 
    $(".realisatieslink1").show(); 
    }); 
    $(".realisatiesafb1").mouseleave(function() { 
    $(".realisatieslink1").hide(); 
    }); 

}); 
.ccm-custom-style-container.ccm-custom-style-slide31-85.realisatieslink1:hover { 
    display: block; 
}

http://jsfiddle.net/LLz19way/2/

更新：您可以當鼠標懸停在加個班文本，爲容器：

$(".realisatieslink1").mouseenter(function() { 
    $(".realisatiesafb").addClass('hover'); 
    }); 
    $(".realisatieslink1").mouseleave(function() { 
    $(".realisatiesafb").removeClass('hover'); 
    });

來源

2015-09-08 11:37:03

謝謝。這給出了相同的結果，當我將鼠標懸停在「BEKIJK REALISATIES」鏈接上時，圖像懸停效果消失了，所以它不再模糊。這導致圖像模糊效果閃爍。 – Jacob

@JacobVanAchter請再試一次。我更新了答案。 –

@JacobVanAchter我認爲問題在於文本，但我沒有看到這種效果。只需爲文本添加效果：懸停。 –

如果這是確定適合你，你可以在裏面realisatiesafb1移動realisatieslink1。一切都應該工作。

http://jsfiddle.net/pLtc88he/

來源

2015-09-08 11:44:16 Marek

這是我不能做的事情，因爲混凝土CMS系統的限制。我正在處理圖像的圖像塊，以及圖像塊下的內容塊，用於鏈接「BEKIJK REALISATIES」。 – Jacob

禁用懸停在鏈接上，背景圖像懸停效果導致閃爍

回答

相關問題