Hover Opazität Effekte mit Rändern in CSS und .LESS

Question

Also im Grunde habe ich dieses kleine Bild Nav-Menü mit nur 4 Links.

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

Und was ich tun möchte, ist es so haben arbeiten, dass die Bilder auf Opazität 100 (1,0) sind, es sei denn man ist in diesem Fall diejenigen, schwebte über die nicht über Schalter auf Opazität schwebte sind 25 (.25), so dass nur ein Bild der 4 vollständig undurchsichtig ist, wenn einer von ihnen darüber schwebt.

Jetzt habe ich das funktioniert, aber ich bin der Abstand 4 Bild Link mit einem Rand rechts von 14px und basierend auf den Regeln, die ich bisher geschrieben habe, wenn ich über einen der Ränder schweben dann werden alle 4 der Bilder Opazität 25 sein, wo ich denke, dass es besser wäre, wenn alle unter diesem Umstand bei Opazität 100 angezeigt würden.

Ich kann dies mit etwas jQuery oder sogar durch Hinzufügen einiger Füllerdivs dazwischen tun, aber ich fragte mich, ob irgendjemand einen besseren Ansatz kennen würde, das ist reines 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

Wenn Sie es reine CSS Weg machen wollen, ich habe eine Lösung für Sie: (Ich habe es getestet)

CSS: (Beachten Sie, dass ich entfernt Rand und legen Sie es absolute Positionierung verwenden, da Sie die Breite 220px) wissen

.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: (beachten Sie, dass ich 4 Klassen hinzugefügt haben)

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