[英]Disable hover on link, background image hover effect causes flickering
我目前正在處理具有懸停效果的圖像。 將鼠標懸停在圖像上時,鏈接變為可見。 圖像對懸停有模糊效果。 問題是,當您將鼠標懸停在鏈接上(在圖像頂部可見)時,圖像開始閃爍(在模糊和不模糊之間)。
一些代碼:
$(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混凝土5中工作,這限制了我編輯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%; }
嘗試這個:
.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');
});
如果是對你合適,你可以移動realisatieslink1
內realisatiesafb1
。 一切都應該正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.