Поменяйте эффекты непрозрачности с полями в CSS и .LESS - PullRequest
Новая
       21

Поменяйте эффекты непрозрачности с полями в CSS и .LESS

0 голосов
/ 27 марта 2012

В общем, у меня есть это маленькое меню навигации по изображениям с 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 или даже, добавив между ними несколько заполнителей, но мне было интересно, кто-нибудь знает лучший подход, который будет чистым 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);

Ответы [ 2 ]

1 голос
/ 28 марта 2012

Если вы хотите сделать это чистым способом css, у меня есть решение для вас: (Я проверил это)

CSS: (Обратите внимание, что я удалил поле и разместил его, используя абсолютное позиционирование, поскольку вы знаете, что ширина составляет 220 пикселей) 

.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>
0 голосов
/ 27 марта 2012 
.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;}
...