画像マスクをホバーに表示する方法

Question

私のサイトには、ユーザーの写真が入ったプロフィールページがあります。ユーザーホバーが写真の上に置かれていると、画像の上に表示される透明なマスクをクリックしてユーザーがクリックすると、プロフィール画像を更新できるモーダルが表示されます。

私はそれを動作させることができません。デモは以下の通りです：

$(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です。

私のサイトでは、マスクが実際に画像の中央に座っているように見えます。しかし、それはまだ点滅します。

また、これは重要です。私はカーソルを常にリンクとして表示したいと思います。現在、ユーザーがテキストの上にカーソルを置くと、カーソルがテキストバーに変わり、私はそれを望んでいません。

Answer 1

どのようにmask-layerデフォルトを別のCSSルール

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

を追加して作ります上記のCSSとそれは点滅しません。あなたのクリックの一部、使用する

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

：私はテキストにカーソルを合わせると、カーソルの変更についての点滅を解決しますが、何

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

Answer 2

あなただけのユーザーの

マウスはデモで画像ここ

に置いたときにマスクを表示したい場合はJavaScriptを使用する必要はありません。

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

私はあなたのjsfiddleを更新しました：基本的に、私はちょうどCSSを使用する方法についてdisplay: none

demo