將鼠標懸停在元素上會使下一個元素動畫化-如何刪除內聯JS

Question

我是JavaScript的新手，但是我試圖找到一種更有效的方法來調用翻轉函數，而無需在HTML中使用內聯事件。 以下是我當前使用的方法：

HTML

        <div id="work_square">
        <img onmouseover="rolloverIn('rollover_1');" onmouseout="rolloverOut('rollover_1');" src="images/frugal_image.png" width="100%"/>
        <div onmouseover="rolloverIn('rollover_1');" onmouseout="rolloverOut('rollover_1');" id="rollover_1" class="rollovers">
            <div id="rollover_text">
                <h2>ROLLOVER 1 TITLE</h2>
                <p>This is rollover 1.</p>
            </div>
        </div>
    </div>
    <div id="work_square">
        <img onmouseover="rolloverIn('rollover_2');" onmouseout="rolloverOut('rollover_2');" src="images/exhibiton_image.jpg" width="100%"/>
        <div onmouseover="rolloverIn('rollover_2');" onmouseout="rolloverOut('rollover_2');" id="rollover_2" class="rollovers">
            <div id="rollover_text">
                <h2>ROLLOVER 2 TITLE</h2>
                <p>This is rollover 2.</p>
            </div>
        </div>
    </div>

JS

<script>
function rolloverIn(el){
    var elem = document.getElementById(el);
    elem.style.opacity = 1;
    elem.style.transform = "scale(1)";
}
function rolloverOut(el){
    var elem = document.getElementById(el);
    elem.style.opacity = 0;
    elem.style.transform = "scale(0)";
}

基本上，我正在調用一個函數，以將CSS變換和不透明度更改應用於鼠標懸停在圖像或鼠標懸停上的每個work_square上的鼠標懸停，然后在鼠標移開時刪除更改。

這種方法有效 ，但是據我了解，內聯編碼是一種不好的做法。 有人可以指出我朝着更有效方法的正確方向嗎？

謝謝。

Answer 1

首先， 不要對多個元素使用相同的ID ，ID是唯一的。 這里需要的是類，因此您的HTML代碼應更改為以下形式：

<div class="work_square">
    <img class="rollover" src="images/frugal_image.png" width="100%"/>
    <div class="rollover">
        <div class="rollover_text">
            <h2>ROLLOVER 1 TITLE</h2>
            <p>This is rollover 1.</p>
        </div>
    </div>
</div>
<div class="work_square">
    <img class="rollover" src="images/exhibiton_image.jpg" width="100%"/>
    <div class="rollover">
        <div class="rollover_text">
            <h2>ROLLOVER 2 TITLE</h2>
            <p>This is rollover 2.</p>
        </div>
    </div>
</div>

現在，如果您想使用純JavaScript而不使用內聯代碼，則可以輕松地使用rollover類選擇所有元素，並將mouseover和mouseout事件綁定到函數。 這是正確的代碼：

function rolloverIn(e){
    this.style.opacity = 1;
    this.style.transform = "scale(1)";
}

function rolloverOut(e){
    this.style.opacity = 0;
    this.style.transform = "scale(0)";
}

var elements = document.getElementsByClassName('rollover');
for (var i=0; i < elements.length; i++) {
    elements[i].addEventListener('mouseover', rolloverIn);
    elements[i].addEventListener('mouseout', rolloverOut);
}

Answer 2

^{很抱歉破壞您使用JS的夢想，但是}
這在純CSS中都是可行的 ：

 .work_square{ position:relative; } .work_square > img{ width:100%; } .work_square .rollovers{ position:absolute; top:0; opacity:0; transform: scale(0); transition: 0.6s; } .work_square:hover .rollovers{ transform: scale(1); opacity:1; } 

  <div class="work_square"> <img src="//placehold.it/800x300/cf5" /> <div class="rollovers"> <div class="rollover_text"> <h2>ROLLOVER 1 TITLE</h2> <p>This is rollover 1.</p> </div> </div> </div> <div class="work_square"> <img src="//placehold.it/800x300/f5f" /> <div class="rollovers"> <div class="rollover_text"> <h2>ROLLOVER 2 TITLE</h2> <p>This is rollover 2.</p> </div> </div> </div> 

請注意， 我已經刪除了所有不必要的ID （嘿，您不能在有效的 HTML文檔中使用重復的ID）。
使用容器類.work_square並在其上使用CSS :hover來添加該偵聽器，而不是簡單地將所需的children元素類添加到目標：

.work_square:hover .rollovers{