CODEWITHSUNDEEP
javascriptjqueryhtmlcssvisibility
RudolphRedNose
RudolphRedNose

Reputation: 121

Toggling HTML visibility using CSS and jQuery

Ok so I have a div that contains a canvas and a span which contains an image. I want it such that if the user hovers over or focuses on the div that the image inside of the span will appear. The image wil be invisible otherwise.

Long story short I want to have a canvas with a red 'X' on the corner that is only visible when the canvas is active

$('image-canvas').hover(function() {
  $('delete-image').addClass('active');
}, function() {
  $('delete-image').removeClass('active');
})
.delete-image {
  position: absolute;
  top: 0px;
  right: 0px;
}

.delete-image>img {
  width: 32px;
  visibility: hidden;
}

.delete-image.active>img {
  width: 32px;
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
  <canvas id="imageCanvas"></canvas>
  <span class="delete-image">
            <img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
        </span>
</div>

The hover event fires just fine but the image refuses to toggle visibility. Any help?

Upvotes: 1

Views: 76

Answers (4)

Syno
Syno

Reputation: 1136

When you use a class within your selector, write it like this:

$('.myDiv')

When you use an ID within your selector, write it like this:

$('#myDiv')

For further informations, check out jQuery's learning center website.

Upvotes: 1

Nadav
Nadav

Reputation: 1819

The question is not well-phrased, so I ain't sure I totally understood what you wanted. When you try to select by class, don't forget the dot '.' 

$('image-canvas').hover(function () {
                $('.delete-image').addClass('active');
            }, function () {
                $('.delete-image').removeClass('active');
            })

When using functions 'addClass', 'removeClass', 'toggleClass', etc. - you don't use the '.' sign because it is a function that refers only to classes. On the other hand, when using jQuery selector $(' ') or vanilla querySelector(' '), you should declare what kind of attribute you are selecting by, those will be '#' for ID, '.' for Class, and if you want to select by anything else you can use $('*[anyattribute=anyvalue]'), in your clase it could be $('span[class=delete-image]'). Good luck

Upvotes: 0

Sergii Vorobei
Sergii Vorobei

Reputation: 1487

Seems like you have misspelled or have not specified the jQuery selector type (class . or id #). Please try this:

$('#imageCanvas').hover(function () {
  $('.delete-image').addClass('active');
}, function () {
  $('.delete-image').removeClass('active');
})

Upvotes: 1

Ashraf
Ashraf

Reputation: 2632

See here .

$("#control").mouseover(function(){
  $('#img').show();
});
$("#control").mouseout(function(){
  $('#img').hide();
});
#img{
  display:none;
}
#control{
  margin-bottom:10px;
  padding:5px;
  background-color:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='control'>Show/Hide</div>

<img src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg' id='img'>

Upvotes: 0

Related Questions