jquery изменение видимости с помощью attr не работает

Question

Я хотел бы разместить снимок на другой картинке;

поэтому, когда вы наведите курсор на него, появится тот, который я разместил внутри него; Итак, я переключил его на видимость на скрытый и пробовал через jquery (когда сначала нарисован ), чтобы видимость изменилась на видимую. Я проверил, и выяснил, что свойство видимости действительно изменилось: Однако изображение на самом деле не было видно.

$("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().

f.css("visibility", "visible"); 

Однако, похоже, вы внедряете то, что хотите, неправильно. Вот предложение.

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>