将鼠标悬停在元素上会使下一个元素动画化-如何删除内联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{