javascript - javascript 悬停一个元素并影响另一个元素
问题描述
我有一系列元素 (.dot),我希望能够将鼠标悬停在另一个元素 (.dotWrapper) 上并仅影响包含在该特定 dotWrapper 中的点的比例。
我有一个缩放点的代码笔设置,当我将鼠标悬停在点上时,但我想要更大的悬停区域,所以我希望能够将鼠标悬停在 dotWrapper 上并仅影响特定 dotWrapper 中特定点的比例
代码笔演示 https://codepen.io/celli/pen/MMwpjx
var dot = document.getElementsByClassName("dot"),
dotWrapper = document.getElementsByClassName("dotWrapper");
$('.dot').mouseover(function(event) {
TweenMax.to(this, .5,{scale:3, ease: Circ.easeOut, transformOrigin:"50% 50%"});
});
$('.dot').mouseout(function(event) {
TweenMax.to(this, .5,{scale:1, ease: Circ.easeIn, transformOrigin:"50% 50%"});
});
解决方案
您可以使用 $(this).children('...') 获取特定点尝试将其放入您的代码中:
$('.dotWrapper').mouseover(function(event) {
TweenMax.to($(this).children('.dot'), .5,{scale:3, ease: Circ.easeOut, transformOrigin:"50% 50%"});
});
$('.dotWrapper').mouseout(function(event) {
TweenMax.to($(this).children('.dot'), .5,{scale:1, ease: Circ.easeIn, transformOrigin:"50% 50%"});
});
推荐阅读
- java - Java - 为什么从文件读取时跳过零
- ios - 无法分配给属性:“自我”是不可变的快速错误
- c# - 如何绕过 C# 中的函数参数?
- android - 单击 recyclerview 适配器中的第一项时,最后一项被删除
- java - 两台计算机的 Java unknownhostException
- c++ - 反转数组中的正序列
- visual-studio - Visual Studio 2017 和 Arduino
- angular - 使用 Angular 动画滑入和滑出组件
- java - 如何在 MyBatis 中将整数转换为枚举?
- recursion - 此函数中的 LEA 指令的目的是什么?整体递归的作用是什么?