Javascript：组合悬停和单击事件

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

我在网站上编写了一个团队页面，每个团队成员都有一个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";
        }
    );
});

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

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

我遇到的问题是，我还想引入一种点击状态，它会弹出一个弹出窗口，显示此人及其工作描述的视频，但我无法让它工作

我曾尝试创建一个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>

使用一点Javascript：

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

$ = 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>

满足于此

也许这会给你一些想法：

var members=document.querySelectorAll（'.team member'）；
成员。forEach（功能（成员）{
member.addEventListener（'mouseenter'，memberShowGIF）；
member.addEventListener（'mouseleave'，memberShowPNG）；
member.addEventListener（“单击”，memberVideo）；
});
函数memberShowGIF（事件）{
this.src=this.dataset.gif；
}
函数memberShowPNG（事件）{
this.src=this.dataset.png；
}
功能成员视频（事件）{
log（'this.id:'的视频内容）；
}

我们可以看到您引用的其他代码吗<代码>“我曾尝试创建CSS覆盖，但它拒绝与悬停效果（javascript）一起工作，因此我的假设是它们不能很好地配合（？？）。还有，

什么是“不能很好地配合？”

到底出了什么问题？什么样的公司会让一个新手从头开始创建自己的网站？一个员工愿意学习新东西的小公司。Protip:stackoverflow对初学者不友好。事实就是这样。在你的主题上，试着用css编码悬停，用javascript编码视频onclick。这样会跳得很好的。谢谢你们。感谢您的支持