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>