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>