懸停不透明效果與邊緣在CSS和.LESS

所以基本上，我有這個小圖像導航菜單隻有4個鏈接。懸停不透明效果與邊緣在CSS和.LESS

<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），所以只有其中的一幅圖像會被完全遮蓋，如果它們中的任何一幅都被遮蓋了。

現在我已經得到了這個工作，但我用14px的margin-right排列了4圖像鏈接，並基於我迄今爲止編寫的規則，如果我在任何邊距上徘徊那麼所有這4幅圖像都將是不透明度25，因爲在這種情況下，我認爲它們會更好地顯示在不透明度100下。

我可以做到這一點與一些jquery，甚至通過添加一些填充divs之間，但我想知道如果任何人都會知道一個更好的方法，這是純粹的CSS /少。

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

來源

2012-03-27 Rooster

除非我俯瞰東西是緊緊裹住4個圖像鏈接額外父DIV似乎是唯一的出路.. – pleunv 2012-03-27 15:09:02

啊，所以額外的規則像.home_featured_link：懸停.new_parent：懸停。 hf_link .....亞讓我嘗試 – Rooster 2012-03-27 15:27:18

啊，沒有工作，或者說，我不能概念化正確的CSS規則寫...幫助？ – Rooster 2012-03-27 15:38:56

如果你想這樣做的純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>

來源

2012-03-28 15:29:32 safrazik

工程就像一個魅力。謝謝。我寧願避免絕對定位，但我猜如果我想純粹用css，那就別無選擇。 +1 – Rooster 2012-03-28 21:16:50

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

來源

2012-03-27 16:15:33 safrazik

沒有。 .opacity（）是由.less .....提供的過濾器。不必擔心這種方式會導致微軟不贊成使用不透明屬性。 – Rooster 2012-03-27 17:18:46

我明白了。我花了一些時間弄清楚如何做到這一點，並找到了解決方案。看看我發佈的其他答案。問候。 – safrazik 2012-03-28 15:31:16

懸停不透明效果與邊緣在CSS和.LESS

回答

相關問題