Наведите указатель мыши на элемент анимации следующего элемента - Как удалить встроенный 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> 

Обратите внимание, что я удалил все ненужные идентификаторы (эй, вы не можете использовать повторяющиеся идентификаторы в действительном HTML-документе).
Используйте свой контейнерный класс .work_square и использовать CSS :hover добавьте этот слушатель, а не просто добавьте желаемый класс дочернего элемента к цели:

.work_square:hover .rollovers{

Answer 2

Прежде всего, никогда не используйте один и тот же идентификатор для нескольких элементов, идентификаторы являются уникальными. Здесь вам нужны классы, поэтому ваш 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);
}