1

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

基本的に、画像またはロールオーバーがマウスオーバーされたときに各work_squareに配置されたロールオーバーにCSS変換と不透明度の変更を適用し、マウスアウトで変更を削除する関数を呼び出しています。

この方法は機能しますが、インライン コーディングは悪い習慣だと理解しています。誰かが私をより効率的な方法に向けて正しい方向に向けることができますか?

ありがとう。

4

2 に答える 2

0

まず、複数の要素に同じ 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 バインドできます。正しいコードは次のとおりです。mouseovermouseout

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);
}
于 2014-10-18T11:47:58.233 に答える
0

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{
于 2014-10-18T12:02:56.733 に答える