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> 

そして、何私がやりたいことは一つは（不透明度25にスイッチ上でホバリングしていないもの、その場合にはホバーされていない限り、画像はすべて不透明度100（1.0）であるので、それが動作していています.25）ので、それらのどれかが上に乗っている場合、4の1つの画像だけが完全不透明になります。

これで問題は解決しましたが、余白の14倍の4つのイメージリンクを除外しています。これまでに書いたルールに基づいて、余白の上にカーソルを置いているとこの4つの画像のすべてが不透明度25になります。この状況では、すべてが不透明度100で表示されるようになります。

私はいくつかのjQueryを使って、あるいは間にいくつかのフィラーdivを追加することなく、誰もが純粋なCSS /以下thatsのより良いアプローチを知っているならば、私は思っていたことにより、これを行うことができます。

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

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

次のとおりです。（私は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;}