css和.LESS中带有边距的悬停不透明度效果

基本上，我有一个小小的图像导航菜单，只有4个链接

<div class="home_featured_links">
    <a class="hf_link" href="<?=site_url('articles');?>"><img src="<?=site_url('assets/default/images/cta1.png');?>" /></a>
    <a class="hf_link" href="<?=site_url('drills');?>"><img src="<?=site_url('assets/default/images/cta2.png');?>" /></a>
    <a class="hf_link" href="<?=site_url('games');?>"><img src="<?=site_url('assets/default/images/cta3.png');?>" /></a>
    <a class="hf_link" href="<?=site_url('recruiting');?>"><img src="<?=site_url('assets/default/images/cta4.png');?>" /></a>
</div>

---

如果你想用纯css的方式，我有一个解决方案：（我已经测试过了）

CSS：（请注意，我已经删除了边距，并使用绝对定位进行放置，因为您知道宽度是220px）

HTML：（注意，我添加了4个类）

除非我忽略了一些东西，否则一个额外的父div紧紧围绕着4个图像链接似乎是唯一的出路..啊，所以一个额外的规则，比如.home\u-featured\u-link:hover.new\u-parent:hover.hf\u-link…..你让我试试看，啊，那不起作用，或者更确切地说，我无法概念化正确的css规则来编写…帮助？不..不透明（）是一个由.less…提供的过滤器，不必担心愚蠢的Microsoft不推荐的不透明度属性。我理解。我花了一段时间研究如何做到这一点，并找到了解决办法。看看我发布的另一个答案。他很有魅力。谢谢我宁愿避免绝对定位，但我想如果我只想做css，那就别无选择+1.

.home_featured_links {clear:both;float:left;margin-left:22px;margin-top:10px;}
.hf_link {float:left;display:block;width:220px;height:153px;margin-right:14px;}
.home_featured_links:hover .hf_link {.opacity(25);}
.home_featured_links:hover .hf_link:hover {.opacity(100);

.home_featured_links {clear:both;float:left;margin-left:22px;margin-top:10px;}
.hf_link {float:left;display:block;width:220px;height:153px;margin-right:14px;}
.home_featured_links:hover .hf_link { opacity: 0.25;}
.home_featured_links:hover .hf_link:hover { opacity: 1;}

.home_featured_links {clear:both;float:left;margin-left:22px;margin-top:10px;
position: relative;
}
.hf_link {
display:block;width:220px;height:153px;
position: absolute;
}

.hf_link1 {
left: 0px;
}

.hf_link2 {
left: 234px; /* 0px + 220px + 14px */
}

.hf_link3 {
left: 468px; /* 234px + 220px + 14px */
}

.hf_link4 {
left: 702px; /* 468px + 220px + 14px */
}

.home_featured_links:hover .hf_link {.opacity(25);}
.home_featured_links:hover .hf_link:hover {.opacity(100); }

<div class="home_featured_links">
    <a class="hf_link hf_link1" href="<?=site_url('articles');?>"><img src="<?=site_url('assets/default/images/cta1.png');?>" /></a>
    <a class="hf_link hf_link2" href="<?=site_url('drills');?>"><img src="<?=site_url('assets/default/images/cta2.png');?>" /></a>
    <a class="hf_link hf_link3" href="<?=site_url('games');?>"><img src="<?=site_url('assets/default/images/cta3.png');?>" /></a>
    <a class="hf_link hf_link4" href="<?=site_url('recruiting');?>"><img src="<?=site_url('assets/default/images/cta4.png');?>" /></a>
</div>