CODEWITHSUNDEEP
jquery
John D. Pooley
John D. Pooley

Reputation: 11

How to hide image and show it upon hover on a different element

Struggled with this for a while and couldn't find a previous solution on here. I imagine it's something very basic that I'm missing. Would be grateful for any assistance.

I'm attempting to hide the image and then show it when a link is hovered over.

However the image is not hiding upon document load. I tried other ways of achieving this, such as hiding it by default (opacity:0;) and then creating ".show" in css and telling the jQuery to addClass show. This didn't work either and I believed that simply hide and show upon hover would be the better solution.

EDIT: Thanks for your responses. Unfortunately this still isn't working, possibly due to a conflict elsewhere in the code. Thanks for your help.

<div id="content">
    <img id=“firstImage” src="image.jpg">
    <p>Here is <a href="#" target="_blank" id="firstLink">The Link</a></p>
</div>

#content img {
  opacity: 1;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}

$(document).ready(function() {
    $('img').hide();
    $('#firstLink').hover(function() { 
        $('#firstImage').show();
        $('#firstImage').hide);
    });

Upvotes: 1

Views: 945

Answers (3)

zer00ne
zer00ne

Reputation: 43880

You can use CSS by rearranging your layout a little. If your <a> is before the <img> you can use a sibling selector (+ or ~) to invoke :hover on the target element.

Added a bulky jQuery using the mouseenter and mouseleave events and .css method on the opacity property since you have it in CSS and all the common answers of show() and toggle() have been done already, btw fadeIn() is another method with the same results.

SNIPPET

$('#secondLink').on('mouseenter', function() {
  $("#secondImage").css({
    'opacity': 1,
    'transition': 'all 1s ease-in'
  });
});
$('#secondLink').on('mouseleave', function() {
  3
  $("#secondImage").css({
    'opacity': 0,
    'transition': 'all 1s ease-in'
  });
});
#content {
  position: relative;
  height: 80vh;
  width: 50vw;
}
img {
  opacity: 0;
  z-index: 0;
  position: absolute;
  display: block;
  width: 256px;
  height: 256px;
}
a {
  display: inline-block;
  cursor: pointer;
  position: absolute;
}
a#firstLink:hover + img {
  opacity: 1;
  transition: opacity .7s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Never use “ or ” in code unless it's pure text. Use " or ' instead-->


<div id="content">
  <span>Here is </span>
  <a href="#/" id="firstLink">The Link</a>
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" id='firstImage'>
    <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" id='secondImage'>
  <p>Here is
    <a href="#/" id="secondLink">The Second Link</a>
  </p>
</div>

Upvotes: 0

melbx
melbx

Reputation: 319

first make the image hidden from css better than hide() it while loading page !!

#content img{
display:none;
}

then this is the correct jquery code :

$(function{
$("#firstLink").hover(function(){
$("#firstImage").show();
});
});

you have a syntax problem in you code you write hide) instead of hide() .

and this if it was correct it will hide the element immediately after shown it so you have to delete it . that all;

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is partly because you call show() then immdiately hide() the element on hover. Also there is a syntax error as you're missing a parenthesis in your hide() call and you're using non-standard quotes around the id property value of the img.

You can simplify the code to just use toggle() under the hover event, like this:

$(document).ready(function() {
  $('img').hide();
  $('#firstLink').hover(function() {
      $('#firstImage').toggle();
  });
});
#content img {
  opacity: 1;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <img id="firstImage" src="image.jpg">
  <p>Here is <a href="#" target="_blank" id="firstLink">The Link</a></p>
</div>

Upvotes: 1

Related Questions