單擊/激活圖像元素時，如何更改頁面上元素的不透明度？

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