悬停在元素上动画下一个元素-如何删除内联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);
}