jqueryがattrを使用して視認性を変更できない

Question

別の画像に画像を投稿したかったので、

その上にマウスを置くと、その中に置かれているものがポップアップします。 私はそれを非表示に変更し、jquery（ が最初に表示されたとき）を使用して可視性を可視に変更しました。 visibilityプロパティが実際に変更されたことを確認しました： ただし、画像は実際には表示されませんでした。

$("div.main>table td>img").mouseenter(function() { 
 
    try { 
 
    $(this).parent().find(".play").attr("visibility", "visible"); 
 
    } catch (e) { 
 
    window.alert(e.message); 
 
    } 
 
}); 
 

 
$("div.main>table td>img").mouseleave(function() { 
 
    $(this).parent().find(".play").attr("visibility", "hidden"); 
 
});

div.main>table td { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div.main>table td>img { 
 
    transition: box-shadow 0.3s, opacity 0.5s; 
 
    position: relative; 
 
} 
 
div.main>table td>img:hover { 
 
    cursor: pointer; 
 
} 
 
div.main>table { 
 
    margin: auto; 
 
} 
 
.play { 
 
    transition: opacity 0.5s; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 37px; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
} 
 
.play:hover { 
 
    cursor: pointer; 
 
    opacity: 0.8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td> 
 
    <p class="title">This is a video</p> 
 
    <img src="images\experiment.jpg" width="140" height="140" /> 
 

 
    <div class="circle trasparent inline"> 
 
    <img src="images\play1.png" class="play" width="70" height="70" /> 
 
    </div> 
 
</td>

Answer 1

visibility CSSプロパティではなく、属性です。代わりにjQueryの.css（）を使用してください。

ただし、間違った方法で実装しているようです。ここに提案があります。

var play = $("table td .play"); 
 

 
$("table td img").hover(function() { 
 
    play.css("visibility", "visible"); 
 
}, function() { 
 
    play.css("visibility", "hidden"); 
 
});

table td { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
table td>img { 
 
    transition: box-shadow 0.3s, opacity 0.5s; 
 
    position: relative; 
 
} 
 
table td>img:hover { 
 
    cursor: pointer; 
 
} 
 
table { 
 
    margin: auto; 
 
} 
 
.play { 
 
    transition: opacity 0.5s; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 37px; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
} 
 
.play:hover { 
 
    cursor: pointer; 
 
    opacity: 0.8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<td> 
 
    <p class="title">This is a video</p> 
 
    <img src="http://lorempixel.com/400/200/sports"> 
 

 
    <div class="circle trasparent inline"> 
 
    <img src="http://lorempixel.com/400/200/city" class="play"> 
 
    </div> 
 
</td> 
 
    </table>