如何讓圖像蒙版出現在懸停上

在我的網站上，我有一個用戶照片的個人資料頁面。當用戶將照片懸停在他們的照片上時，我想要一個帶有一些文字的透明遮罩，以便用戶可以點擊該圖像，以顯示用戶可以更新其個人資料圖片的模式。如何讓圖像蒙版出現在懸停上

我不能得到它的工作。演示低於：

$(document).ready(function() { 
 

 
    $('.profile-image').hover(function() { 
 
    $('.mask-layer').css("visibility", "visible"); 
 
    }, function() { 
 
    $('.mask-layer').css("visibility", "hidden"); 
 
    }); 
 

 

 
});

.profile-image-container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    position: relative; 
 
} 
 
.profile-image-container .profile-image { 
 
    border-radius: 6px; 
 
    margin: auto; 
 
} 
 
.profile-image-container .mask-layer { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    border-radius: 6px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    visibility: hidden; 
 
} 
 
.profile-image-container .mask-layer span, 
 
.profile-image-container .mask-layer i { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="profile-image-container"> 
 
    <img class="profile-image" src=http://nineplanets.org/images/earth.jpg alt="Profile img 0313"> 
 
    <div class="mask-layer"> 
 
    <div class="update-pic"> 
 
     <span>Update Photo</span> 
 
    </div> 
 
    </div> 
 
</div>

這是我jsfiddle。

在我的網站上，它看起來更好，面具實際上坐在圖像的中心。但它仍然閃爍。

此外這很重要，我希望光標始終顯示爲鏈接。目前，當用戶懸停在文本上時，光標變爲文本欄，我不希望這樣。

來源

2016-07-27 user4584963

怎麼樣只用CSS：

.mask-layer{ 
    visibility: hidden: 
} 
.profile-image:hover mask-layer{ 
    visibility: visible; 
    cursor: pointer; 
}

我已經更新您的jsfiddle與上面的CSS，它不會閃爍。

http://jsfiddle.net/fcfj0y3a/3/

爲每次點擊的一部分，使用：

$('.mask-layer').on('click', function(e) { 
    alert(e.target, 'was clicked'); 
});

來源

2016-07-27 01:26:20 4lackof

涼，解決了閃爍，但什麼光標變化，當我將鼠標懸停在文本。我需要鉤住一個jQuery事件來點擊蒙版，如果用戶點擊範圍內的文本以及我需要它工作 – user4584963

請查看我的最新編輯。我沒有把'cursor：pointer;'放在jsfiddle中，但這就是你強制改變光標的方法。（'click'，function（e）{alert（e.target，'was clicked！'）;}'（我是點擊事物，對於jQuery使用：'$（'。mask-layer'）。在評論中寫這個，所以佈局不完全正確，但代碼是你所需要的。 – 4lackof

好吧我已經把jQuery代碼放入我的答案中，所以它更容易閱讀（並且語法錯誤已修復） – 4lackof

沒有必要使用JavaScript，如果你只是想顯示蒙當用戶的

鼠標在圖像

這裏徘徊的演示。基本上，我只需要添加另一個CSS規則

.profile-image-container:hover .mask-layer { 
    display: flex; 
}

，使mask-layer默認display: none

demo

來源

2016-07-27 01:24:29 Even

如何讓圖像蒙版出現在懸停上

回答

相關問題