CODEWITHSUNDEEP
jqueryhtmlcss
Hugh
Hugh

Reputation: 65

Can't make hover handler work for some images but not all images

$('.downarrow').hover(function() {
        $(this).stop().fadeTo(400,0.4);
	},function(){	
		$(this).stop().fadeTo(400,1.0);
    });
div.elevator {
      position: fixed;
    }
    img.craft {
      position: fixed;
      left: 100px;
      bottom: 100px;
    }
    img.downarrow {
      position: fixed;
      left: 260px;
      bottom: 540px;
    }
    img.uparrow {
      position: fixed;
      left: 170px;
      bottom: 540px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="elevator">
  <img src="./images/spaceelivator.png" alt="elevator" style="width:300px;height:400px" class="craft">
  <img src="./images/down.png" alt="down" style="width:70px;height:95px" class="downarrow">
  <img src="./images/up.png" alt="up" style="width:70px;height:95px" class="uparrow">
</div>

This works fine for most of my images in the document but all those images have relative positioning. The ones with fixed positioning don't work. I feel like its something to do with that but i'm not really sure as i'm new to all these languages.

Here is a jsfiddle for the whole site. http://jsfiddle.net/bv9wokss/

Upvotes: 0

Views: 52

Answers (2)

matthias_h
matthias_h

Reputation: 11416

Just adjusted for the comments below OP, Fiddle:

$('.downarrow, .uparrow').hover(function () {
$(this).stop().fadeTo(400, 0.4);
 }, function () {
$(this).stop().fadeTo(400, 1.0);
});

In your code you only applied the hover() for $('.downarrow'). It's possible to select multiple elements like e.g. $('.downarrow, .uparrow') at once.

Update: Adjusted Fiddle to easier identify the images in question. Problem is that, while scrolling, the <div id="wrap"> sometimes covers various images and then the hover won't apply. Can be checked with Web Developer tools e.g. when the moon-image is about upper third of the screen, then #wrap covers up and down images.

Upvotes: 2

himanshu
himanshu

Reputation: 1797

i think problem is that you applied hover effect only in .downarrow DEMO

$('.downarrow').hover(function () {
        $(this).stop().fadeTo(400, 0.4);
    }, function () {
        $(this).stop().fadeTo(400, 1.0);
    });
     $('.uparrow').hover(function () {
        $(this).stop().fadeTo(400, 0.4);
    }, function () {
        $(this).stop().fadeTo(400, 1.0);
    });
     $('.craft').hover(function () {
        $(this).stop().fadeTo(400, 0.4);
    }, function () {
        $(this).stop().fadeTo(400, 1.0);
    });

Upvotes: 0

Related Questions