Question

＆＃13;

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

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

这适用于文档中的大多数图像，但所有这些图像都具有相对定位。有固定定位的人不会工作。我觉得这与它有关，但我并不确定，因为我对所有这些语言都不熟悉。

这是整个网站的jsfiddle。 http://jsfiddle.net/bv9wokss/

Answer 1

根据OP Fiddle下面的评论进行了调整：

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

在您的代码中，您只为hover()应用了$('.downarrow')。可以选择多个元素，例如$('.downarrow, .uparrow')一次。

更新：调整Fiddle以便更轻松地识别相关图片。问题是，在滚动时，<div id="wrap">有时会覆盖各种图像，然后悬停将不适用。可以使用Web Developer工具进行检查，例如当月亮图像大约是屏幕的上三分之一时，#wrap会覆盖上下图像。

Answer 2

我认为问题是您只在.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);
    });

无法使悬停处理程序适用于某些图像，但不适用于所有图像

2 个答案: