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>