我正在尝试用JavaScript或jQuery来改变当你点击img元素时div元素的不透明度。我不知道CSS或HTML是否可以做到这一点，但是如果你知道怎么做，请随时告诉我!不管怎样，这是我现在拥有的代码;

<div class="scene" id="scene">the text</div> 
<!--the text element i'm trying to change-->

<img src="zyro-image (7) (1).png" id="look" class="look"><img> 
<!--the img element; if it's clicked/active it changes the div element's opacity-->

the styles ⬇️

.scene{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px; 
    opacity: 0;
}

<!--____________________-->

.look{
    height: 100px;
    position: relative;
    left: 10px;
    top: -685px;
    margin-top: auto;
    z-index: 1;
    transition: top, 1s;
}

.look:hover{
    top: -692px;
}

这里有一些我尝试过的事情;
（我得到了这些答案的大部分-如果不是全部的话-从stackoverflow）

• • 一、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script>
$('.look').active(function(){
  $('.scene').css('opacity', '1');
 });
</script>

这个不起作用，看起来好像什么也不起作用。没有区别。

• • 二、**

<script>
    function myFunction()
    {
        document.getElementById('scene').setAttribute("class", "scene2");
    }
</script>

<!--________________-->

<styles>
.scene2{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px;
    opacity: 1;
}
</styles>

这一次的结果与上一次相同，没有差异。

• • 三、**

<script>
        function change_css(){
            document.getElementById('result').style.cssText = 'font-family:'Common Pixel', sans-serif; background-color:black; border:2px; color:white; padding-top:10px; padding-bottom:25px; width:350px; opacity:1;';
        }
    </script>

我想我都不需要再说了。它。曾经。没有。工作。