将鼠标悬停在元素上动画化下一个元素-如何删除内联JS
Hover over element animate next element - How to remove inline JS
我对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转换和不透明度更改,然后在鼠标悬停时删除更改。
这种方法有效,但据我所知,内联编码是一种糟糕的做法。有人能为我指明一个更有效的方法的正确方向吗?
谢谢。
很抱歉破坏了你使用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{
首先,永远不要对多个元素使用相同的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);
}
相关文章:
- 从所有元素中删除HTML5验证
- JavaScript-如何按类查找元素并删除此类
- 在表中找到元素时删除行
- jQuery-如何在给定延迟的情况下从元素中删除类
- 如何从同一元素中删除同一类
- 捕捉.svg — 单击其中一个元素时删除对象
- addClass 到当前 li 元素并删除类
- 使用 jQuery 从 HTML 中的多个图像元素中删除文件路径
- 对于包含特定字符串的每个元素,删除字符串及其后的所有内容
- 如何使用jquery从父元素中删除文本(不删除内部元素)
- AngularJS:如何从指令添加的元素中删除事件处理程序
- 突变观察者未能检测到元素's删除dom
- 用程序从单个HTML元素中删除CSS样式规则
- 如何为span元素添加/删除类onclick
- 为什么不从<选择>元素中删除所有项目
- 从 Zend 窗体元素中删除 id 属性
- Jquery 在当前之前从元素中删除属性
- 如何从特定元素中删除快速单击
- 如何从元素中删除定义的文本字符
- 从元素中删除特定的 jQuery 单击事件