CODEWITHSUNDEEP
jqueryhtmlcss
ilan Goldenberg
ilan Goldenberg

Reputation: 19

jquery changing visibility using attr doesn't work

I wanted to post a picture , upon another picture;

so when you hover over it , the one I placed inside it will pop up; so , I switched it's visibility to hidden , and tried through jquery (when the first is hovered) to have the visibility changed to visible. I checked , and found out that the visibility property did actually change : however , the image was not actually visible.

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

Upvotes: 0

Views: 164

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28437

visibility is a CSS property, not an attribute. Use jQuery's .css() instead.

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

However, it seems that you are implementing what you want in the wrong way. Here is a suggestion.

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>

Upvotes: 4

Related Questions