鼠標懸停在元素上動畫下一個元素 - 如何刪除內聯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

^{抱歉毀了你的使用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它來添加監聽器，不是簡單地添加所需類的兒童元素的目標：

.work_square:hover .rollovers{ 

Answer 2

首先，永遠不會對多個元素使用相同的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); 
}