Question

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

http://www.microsoft.com/en-us

在我的博客上的这个页面上，博客帖子显示我认为我需要的只是缩略图箭头但是它没有显示正确的文件中的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>

我希望在这里重新定位悬停效果，但我终生不能看到橙色在第一个链接和箭头中的产品图像上的应用位置

Answer 1

这将在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;

无法在产品包装盒上找到悬停效果

1 个答案: