我对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上的翻转,然后删除鼠标输出的更改。
此方法有效,但我的理解是内联编码是不好的做法。有人能指出我朝着更有效的方法迈进正确的方向吗?
感谢。
答案 0 :(得分: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
类来选择所有元素,并将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);
}
答案 1 :(得分: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
来添加该侦听器,而不是简单地将所需的children元素类添加到目标:
.work_square:hover .rollovers{