在 css 和 .LESS 中悬停不透明度效果与边距

Question

所以基本上，我有这个只有 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>

我想要做的是让它工作，以便图像全部处于不透明度 100(1.0)，除非将一个悬停在这种情况下，未悬停的图像切换到不透明度 25(.25) 所以如果将其中任何一个悬停在上面，则 4 个图像中只有一个完全不透明。

现在我已经完成了这项工作，但是我将 4 图像链接与 14px 的边距隔开，并且根据我到目前为止编写的规则，如果我将鼠标悬停在任何边距上，那么所有 4 张图像的不透明度都为 25，我认为在这种情况下以不透明度 100 显示它们会更好。

我可以用一些 jquery 甚至在两者之间添加一些填充 div 来做到这一点，但我想知道是否有人会知道一种更好的方法，即纯 css/less。

CSS：

.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);

Answer 1

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

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

.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); }

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

<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>

Answer 2

.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;}