单击/激活图像元素时，如何更改页面上元素的不透明度？

Question

当您单击 img 元素时，我正在尝试更改 div 元素的不透明度，使用 JavaScript 或 jQuery。我不知道是否可以使用 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-->

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 得到了大部分答案——如果不是全部的话）

1.

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

这个没有用，看起来好像什么也没做。 没有不同。

2.

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

这个结果和上一个一样，没有区别。

3.

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

我什至认为我不需要再说了。 它。 做过。 不是。 工作。

Answer 1

你的图像应该有 onclick 事件监听器，它将触发不透明度的变化：

<img src="yoursrc" onclick="changeOpacity()"/>

给你的 div 一个 id：

<div id="mydiv">I'm a div</div>

然后使用这个 function 它将通过 id 获取你的 div 并将你更改的不透明度 class 添加到 div：

function changeOpacity() {document.getElementById('mydiv').classList.add('opacity-low')}

CSS Class：

.opacity-low {opacity: 0.5;}

可能有更漂亮的方法来做到这一点，但我不是普通 JS 的专家。

Answer 2

点击 IMG 后设置 DIV 的不透明度：

 $("#img").click(() => $("#div").css("opacity", 0.5))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div">I need opacity</div> <img id="img" src="https://via.placeholder.com/100" />

或者更好的是 CSS

<style>
   .opacityClass {opacity:0.5;}
</style>

...
$("#img").click( () => $("#div").addClass("opacityClass") )