Javascript:结合悬停和点击事件

Question

我最近才开始编码，并被要求从头开始为我们公司的网站编码。

我在网站上编写了一个团队页面，其中包含每个团队成员的 PNG。当用户将鼠标悬停在任何 PNG 上时，他们会变成他们挥手/做某事的小动画 GIF。

这是javascript:

$(document).ready(function()
{
    $("#imgAnimateBeth").hover(
        function(){
            this.src = "images/Team/Videos/Beth.gif";
        },
        function(){
            this.src = "images/Team/Static-shots/Beth.png";
        }
    );
});

我遇到的问题是，我还想引入一个点击状态，该状态会弹出一个弹出窗口，其中包含该人的视频及其职位描述，但我无法让它工作。

我曾尝试创建一个 CSS 叠加层，但它拒绝与悬停效果 (JavaScript) 一起工作，所以我的假设是它们不能很好地协同工作 (??)。

以下是上述部分的 HTML。谁能启发我如何做到这一点？请用简单的语言!

<div class="teamsection">
    <img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
    <img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
    <img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
    <img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
    <img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
    <img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
    <img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
    <img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
    <img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
    <img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
    <img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
    <img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
    <img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
    <img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
    <img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
    <img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>

此外，如果您需要我上传任何其他内容，请喊出来。

CSS 覆盖是这样的:

CSS 代码叠加是这样的:

.popup {
    display: none;
    position: fixed;
    padding: 30px 70px;
    width: 700px;
    height: 100%;
    z-index: 20;
    left: 50px;
    top: 20px;
    background: rgba(0, 0, 0, 0.9);
    overflow: scroll;
}

使用一点 Javascript:

$ = function(id) {
  return document.getElementById(id);
}

var show = function(id) {
    $(id).style.display ='block';
}
var hide = function(id) {
    $(id).style.display ='none';
}

我基本上是对 HTML 这样做的:

<div>
    <a href="javascript:void(0)" onclick="show('beth')">
        <img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
    </a>
</div>
    
<div class="popup" id="beth">
    <div class="close-button">
        <a href="javascript:void(0)" onclick="hide('beth')"><i class="fa fa-times" aria-hidden="true"></i> Close</a>
    </div>
    <h4>CONTENT HERE</h4>
</div>

Answer 1

也许这会给你一些想法:

var members = document.querySelectorAll('.team-member');

members.forEach(function(member) {
	member.addEventListener('mouseenter', memberShowGIF);
        member.addEventListener('mouseleave', memberShowPNG);
 	member.addEventListener('click', memberVideo);
});

function memberShowGIF(event) {
	this.src = this.dataset.gif;
}

function memberShowPNG(event) {
	this.src = this.dataset.png;
}

function memberVideo(event) {
	console.log('The video thing for: ' + this.id);
}

<div class="teamsection">
  <img id="Beth" class="team-member" 
       src="https://via.placeholder.com/200?text=Beth.png" 
       data-png="https://via.placeholder.com/200?text=Beth.png"
       data-gif="https://via.placeholder.com/200?text=Beth.gif">
  <img id="Kiemia" class="team-member" 
       src="https://via.placeholder.com/200?text=Kiemia.png" 
       data-png="https://via.placeholder.com/200?text=Kiemia.png"
       data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>

这里最重要的学习是:

• querySelectorAll (作为用于选择节点的 jQuery 的普通替代品)
• addEventListener
• Data attributes