Javascript CSS3转换：完全在移动设备上替换它们？

我正在建立一个响应性强的网站，并且只想在桌面版本（屏幕足够大的地方）使用这种效果

代码如下所示：

        <div class="block_holder">
            <div class="hover_block block_4">
                <img src="images/thumbnail.png" />
                <div class="top_half">Top Div that slides down on hover</div>
                <div class="bottom_half">Bottom Div that slides up on hover</div> 
                <div class="hover_info">Caption text content</div>
            </div>
        </div>

悬停时向下滑动的上俯冲
悬停时向上滑动的底部Div
标题文本内容

转换发生在以下类中：.block_4.top_half.block_4.bottom_half和.hover_info中的所有内容以产生悬停效果

对于手机，我只希望照片可以点击，没有任何过渡，因为没有悬停。有没有一种方法可以将整个代码块替换为以下内容：

            <p>
                <a id="fancybox-manual-b" href="javascript:;" class="link"><img src="images/patterns_thumb.png" alt="pattern" class="portfolio"/></a>
                Patterns made in Adobe Illustrator
            </p>

Adobe Illustrator制作的图案

我试过在为手机和平板电脑指定的@media部分中，将.top\u half.bottom\u half和.hover\u info设置为“display:none；”，然后将img设置为链接，但使用提供的第一个代码无法单击图像。为什么会这样

---

很抱歉，如果有一个明显的解决方案，我还没有找到或想到任何解决方案。

您最好使用modernizer

if ( Modernizr.touch ) {
    $('.top_half,.bottom_half,.hover_info').hide();
    $('.hover_block img').click(function() {
         alert('I was clicked');
    }).css('cursor','pointer');
}

---

这里有一把小提琴来演示其功能

href=“javascript:；”

什么都不做。您试图链接到什么？在我的代码中，当单击该链接时，它会运行一个与ID关联的脚本。尝试删除href并将onclick放在标记中，而不是javascript:，调用一些函数。这些代码可以单独工作，但我的问题是根据@media screen size实现一个或另一个。