jquery ändern Sichtbarkeit mit attr funktioniert nicht

Question

Ich wollte ein Bild, auf ein anderes Bild;

Wenn Sie also den Mauszeiger darüber bewegen, wird der, den ich eingefügt habe, angezeigt. Also, ich habe die Sichtbarkeit auf hidden umgestellt und versucht durch jquery (wenn die zuerst verschoben wird) die Sichtbarkeit in visible geändert zu haben. Ich überprüfte und fand heraus, dass sich die Sichtbarkeitseigenschaft tatsächlich geändert hat: das Bild war jedoch nicht sichtbar.

$("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 ist eine CSS-Eigenschaft, kein Attribut. Verwenden Sie stattdessen ".Css()" von jQuery.

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

Es scheint jedoch, dass Sie implementieren, was Sie in der falschen Weise wollen. Hier ist ein Vorschlag.

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>