Javascript 将鼠标悬停在元素上为下一个元素设置动画-如何删除内联JS

我对JavaScript比较陌生，但我正试图找到一种更有效的方法来调用滚动函数，而不必在HTML中使用内联事件。以下是我目前使用的方法：

HTML

滚动1标题
这是翻滚1

滚动2标题
这是翻滚2

JS

功能翻转（el）{
var elem=document.getElementById（el）；
elem.style.opacity=1；
elem.style.transform=“比例（1）”；
}
功能翻转（el）{
var elem=document.getElementById（el）；
elem.style.opacity=0；
elem.style.transform=“比例（0）”；
}

基本上，我正在调用一个函数来应用CSS转换和不透明度更改，当鼠标移到图像或滚动时，将滚动放置在每个工作区上，然后在鼠标移出时移除这些更改

这种方法有效，但据我所知，内联编码是一种糟糕的做法。有人能给我指出一个更有效的方法的正确方向吗

---

谢谢。

首先，不要对多个元素使用相同的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>

很抱歉破坏了您使用JS的梦想，但是
这在纯CSS中都是可行的：

.work\u square{位置：相对；}
.work_square>img{宽度：100%；}
.工作坊.翻车{
位置：绝对位置；
排名：0；
不透明度：0；
变换：比例（0）；
过渡：0.6s；
}
.工作广场：悬停。翻滚{
变换：比例（1）；
不透明度：1；
}

滚动1标题
这是翻滚1

滚动2标题
这是翻滚2

id对上帝来说是唯一的，你可以使用jquery删除内联函数调用$（'#rollover_1'）。mouseover（function（）{//在鼠标悬停时做点什么}）；$（'#rollover_1'）.mouseout（函数（）{//在mouse out上执行某些操作。}）；删除你的问题，开始阅读：，等等。出于某种原因，你不喜欢CSS吗？JavaScript在这里似乎完全没有必要。我已经在您的语句中添加了“valid”限定符。显然，如果您觉得我引入了一个错误，请将其编辑掉，但是可以使用重复的

id

s，即使它们不应该使用。非常感谢，现在已将其全部清理干净，并且可以完美地工作。你可能已经粉碎了我的JS梦想，但至少这是迈向更好实践的一步：）谢谢@David。更准确。

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

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

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);
}