如何在移动视图中使用焦点而不是悬停

Question

我刚刚了解到悬停在移动设备上不起作用，我不太确定在某人的建议中将“焦点”应用于我的css代码中。在这一点上我有点紧张，并希望有一个快速的方法来解决这个问题。感谢。

HTML：

<div style="width: 100%">
    <ul class="img-list2">
        <li>Building of the Year<span class="text-content2">The Architect’s Newspaper publishes four regional editions—East, West, Midwest, and Southwest. We’re seeking the best new building in each of these regions. </span></li>
        <li>Adaptive Reuse<span class="text-content2">Adaptive Reuse</span></li>
        <li>Architectural Lighting<span class="text-content2">Architectural Lighting</span></li>
    </ul>
    <ul class="img-list2">
    <li>Architectural Models<span class="text-content2">Whichever form is your favorite—virtual or analog, interior or exterior, landscaping or urban— show the world how you build, just at a smaller scale. Your model does not need to have come to fruition. All scaled architecture types are eligible.</span></li>
    <li>Building Renovation<span class="text-content2">Building Renovation</span> </li>
    <li>Civic Institutions<span class="text-content2">This category is in pursuit of educational, academic, governmental or social institutions whose design not only elevates, but also is central to the organization’s mission.</span></li>
    </ul>
    <ul class="img-list2">
        <li>Digital Fabrication <span class="text-content2">We’re seeking the best architectural applications of building components. These can be digital fabrications or parametric designs. </span></li>
        <li>Facade<span class="text-content2">Facade</span></li>
        <li>Interior, Non-Residential<span class="text-content2">Interior, Non-Residential</span></li>
    </ul>
    <ul class="img-list2">
        <li>Interior, Residential<span class="text-content2">Interior, Residential</span></li>
        <li>Landscape<span class="text-content2">Landscape</span></li>
        <li>Residential, Multi-Unit<span class="text-content2">Residential, Multi-Unit</span></li>
    </ul>
    <ul class="img-list2">
        <li>Residential, Single Family<span class="text-content2">Residential, Single Family</span></li>
        <li>Student Work<span class="text-content2">Projects that are built or unbuilt are eligible. Students must be in an accredited architectural school or graduated from their program with in the last academic year. </span></li>
        <li>Temporary Installation<span class="text-content2">Whether your installation is a site-specific exhibition or it created an entirely new site, enter your work that showcases materials, techniques and invention.</span></li>
    </ul>
    <ul class="img-list2">
        <li>Unbuilt<span class="text-content2">On the boards or in the drawers, these projects should be seen. Any building project that got left behind or didn’t get it’s chance to see the light of day—a second or non-placing competition entry, a project for a client who decided to go another route, etc.—this category gives your project a second chance. </span></li>
        <li>Urban Design<span class="text-content2">Built or unbuilt, enter your design plans that focus on groupings of buildings, street and public spaces to create a more sustainable and functional neighborhood or city.</span></li>
        <li>Young Architects Award<span class="text-content2">Emerging architects or firms often have the talent but don’t always get the glory. This category seeks to celebrate the work of young practices (10 years or less) or professionals (35 years or less). All project types are eligible</span></li>
    </ul>
</div>

CSS：

ul.img-list2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    margin: 2px 0 2px 0;
    height:95px;
}

ul.img-list2 li {
    display: inline-block;
    position: relative;
    margin: 0 0 0 0;
    padding: 20px 20px 20px 20px;
    background-color:#000;
    color:#08f7c2;
    width:32%;
    line-height:145%;
    font-size: 15px;
    height:95px;
    vertical-align:middle;
}

span.text-content2 span {
    display: table-cell;
    text-align:left;
    padding:10px;
}

span.text-content2 {
    background-image: url("http://awards.archpaper.com/wp-  content/uploads/2015/08/cat_overlay_bg_new4.png");
    cursor: pointer;
    display: table;
    height: 245%;
    left: 0;
    position: absolute;
    top: 0!important;
    width: 120%;
    min-width:250px;
    opacity: 0;
    transform:scale(1);
    font-size:15px;
    font-weight:normal;
    line-height:145%;
    color:#fff;
    text-align:left;
    padding:23px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ul.img-list2 li:hover span.text-content2 {
    opacity: 1;
    z-index: 99;
}