html - 在产品包装盒上找不到悬停效果

我正在尝试复制此页面上的图像框

http://kvalixhu.digitalthinkersni.co.uk/termekek/plc-hmi/unitronics/

在我的博客的此页面上，该博客文章显示我以为我需要的只是缩略图箭头，但是与文件中包含的CSS不能正确显示

<style>

.thumbnail-arrow { width: 28px; height: 28px; position: absolute; bottom: -9px; right: 20px; background-image: url(./images/sprite1.png); background-size: 4300%; background-position: 7.993% 82.292%; transition: all 0s ease-in-out; }
</style>

  

 <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    } else { ?>
    <a href="<?php the_permalink(); ?>"><img src="<?php     bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php  the_title(); ?>" /></a>
<?php } ?>
                     <div class="thumbnail-arrow"></div>
       </div>

我希望在此处补充悬停效果，但是我无法终生看到第一链接和箭头中橙色应用于产品图像的位置

最佳答案

那将在第690行的style.css中。

/* Default Link Styles */
a { color: #333333; text-decoration: underline; line-height: inherit; }
a:hover, a:focus { color: #f87b06; text-decoration: none; }
a img { border: none; }

编辑;和箭头在1118行。

.products a:hover .thumbnail-arrow {
    background-position: 5.442% 82.292%;
    transition: all 0s ease-in-out;

关于html - 在产品包装盒上找不到悬停效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34798586/