javascript - 尝试使用iosTouch js进行悬停

我有悬停效果，我正在桌面上很好地使用它，但也需要它们在移动设备上工作。我试图按照YouTube视频上的视频介绍如何使用mootools添加iosTouch，以使ios设备具有类似悬停的效果。我的代码做错了，无法正常工作。我把mootools加到了我的头上。这是我其余的代码。

<div class="page" id="resume">
<div class="container-fluid">
    <h2>Resume</h2>
      <div class="row">

        <blockquote class="col-sm-6" id="qualifications">
          <div class="quote">
            <span class="intro" id="iosTouch">Qualifications</span>
            <span class="more">
              <ul>
                <li>Excellent communication skills, both oral and written</li>
                <li>Ability to quickly learn and apply new technologies</li>
                <li>8 years of experience developing curriculum for instructor-led, web-based and blended modalities</li>
                <li>2 years of experience creating HTML web pages including the testing and debugging of code</li>
              </ul>
            </span>
          </div>
        </blockquote>
    </div><!--row-->
</div><!--content container-->
</div><!-- resume page -->

我添加的JS是：

//fix hover events for ios
$("iosTouch").addEvents({
    touchstart: function() {
        $("iosTouch").addClass('more');
    },
    touchend: function() {
        $("iosTouch").removeClass('more');
    }
});

我的CSS是：

#resume {
padding: 0;
border-top: 40px solid transparent;
}

#resume blockquote {
margin: 0;
padding: 0;
border-left: none;
min-height: 500px;
position: relative;
}

#resume blockquote .quote {
background-color: rgba(255,255,255,.8);
padding: 20px 5%;
position: absolute;
bottom: 0;
width: 75%;
font-weight: 400;
border-radius: 0 50px 0 0;
}

#resume blockquote .quote:hover {
background-color: rgba(255,199,96,.9);
}

#resume #qualifications {
background:url(../images/resume_qualifications.jpg) no-repeat center center;
background-size: cover;
}

#resume .quote .more {
opacity: 0;
font-size: 0;
line-height: 0;
padding-top: 10px;
}

#resume .quote:hover .more {
font-family: "Open Sans", sans-serif;
font-weight: 100;
display: block;
opacity: 1;
font-size: .8em;
line-height: 120%;
}

#resume .quote .intro::after {
content: '...';
}

#resume .quote:hover .intro::after {
content: '';
}

您能提供的任何帮助将不胜感激

最佳答案

您只是错误地使用了jQuery（$）函数。将$("iosTouch")替换为$("#iosTouch")。

这是因为jQuery尝试模拟CSS选择器来获取DOM对象，并且在CSS中，#目标是div。

如果没有#，则意味着您要对名为iosTouch的标签执行该功能。