Question

HTML：

<section class="one">
<div id="wrap">
    <img src="./images/moon.png" alt="moon" style="width:200px;height:200px" Class="moon">
</div>
</section>

的CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

 section {
    position: relative;
    overflow: visible;
    padding: 0px;
    width: 100%;
    height: 100%;
  }

h1 { 
text-align: Center;
font: 15px impact, sans-serif;
color: white;
font-size: 350%
}
#wrap { 
width: 900px; 
margin: 0 auto; 
}
img.moon {
position: relative;
left: 900px;
bottom: 0px;
}

jquery的：

$(document).ready(function(){
    $('.moon').css('opacity', 0.4);  
    $('.moon').click(function(){
    $(this).find('img').stop().fadeTo('slow',1);        
    });
});

第一行有效。图像从0.4不透明度开始。下一部分是问题。它中的代码不起作用。如果我将第二行更改为$('*').click(function() {（删除类并放入'*'），然后在我的网站上随机点击它可以工作，图像就会淡入。如果我将图像类放入并单击图像，它会不行。

Answer 1

您对作为图像父级的div添加不透明度。即使那个div的孩子有不透明度1，他们也会出现0.4，因为他们的父母有不透明度。当您设置选择器的不透明度时，所有子项将递归地接收该不透明度。

因此，您还必须操纵.moon选择器的不透明度。

试试这个：

$(document).ready(function() {
    $('.moon').css('opacity', 0.4);  
    $('.moon').click(function(){
        $(this).css('opacity', 1);
        $(this).find('img').stop().fadeTo('slow',1);        
    });
});

Answer 2

DEMO 从您的代码中移除.find()并完成所有操作：

$(document).ready(function() {
    $('.moon').css('opacity', 0.4);  
    $('.moon').click(function() {
        $(this).stop().fadeTo('slow',1);        
    });
});

单击图像时无法使点击处理程序工作

2 个答案: