当链接单击时更改照片不透明度 [英] Change Photo Opacity When Link Clicked

问题描述

我想用他们的类别的照片画廊。如何使特定照片的不透明度增加（或减少），当他们的类别链接点击？我不知道我是否可以实现这一点与CSS。

解决方案

我会为每个类别创建一个类映射器。

HTML

 < div class =gallery> 
< a href =javascript：void（0）; class =sports> sports< / a> 
< a href =javascript：void（0）; class =cats> cats< / a> 
< a href =javascript：void（0）; class =fashion> fashion< / a> 
< a href =javascript：void（0）; class =technics> technics< / a> 
< img src =http://lorempixel.com/100/100/abstractclass =abstractalt =/> 
< img src =http://lorempixel.com/100/100/cityclass =cityalt =/> 
< img src =http://lorempixel.com/100/100/peopleclass =peoplealt =/> 
< img src =http://lorempixel.com/100/100/fashionclass =fashionalt =/> 
< / div> 
  

将类从锚点映射到图像。在CSS3中，您可以使用〜波形选择器。

CSS

  img {
 opacity：0.5; 
} 
 a.abstract：active〜img.abstract，
 a.abstract：focus〜img.abstract {
 opacity：1; 
} 
  

DEMO

如果此方法不够灵活，您可以考虑使用JavaScript解决方案。 / p>

UPDATE

隐藏输入和类映射器的组合。请注意，现在的行为更多是切换功能。您可以将输入字段的类型更改为 radio （和正确的名称属性），以匹配我的行为演示。

技巧是使用标签触发输入字段。输入字段的位置应在图像容器内，以便您可以使用CSS中的〜选择器。

DEMO

Im trying to make a gallery of photos with their Categories on top of them. How can i make specific photos opacity increase(or decrease) when their category link is clicked? Im not sure whether I can achieve this with css only. Every help is appreciated

解决方案

I would create a class mapper for each category. It's not a very generic solution with CSS only but at least it gets the job done.

HTML

<div class="gallery">
    <a href="javascript:void(0);" class="sports">sports</a>
    <a href="javascript:void(0);" class="cats">cats</a>
    <a href="javascript:void(0);" class="fashion">fashion</a>
    <a href="javascript:void(0);" class="technics">technics</a>
    <img src="http://lorempixel.com/100/100/abstract" class="abstract" alt="" />
    <img src="http://lorempixel.com/100/100/city" class="city" alt="" />
    <img src="http://lorempixel.com/100/100/people" class="people" alt="" />
    <img src="http://lorempixel.com/100/100/fashion" class="fashion" alt="" />
</div>

Map classes from anchor to image. In CSS3 you can use the ~ tilde selector.

CSS

img {
    opacity: 0.5;
}
a.abstract:active ~ img.abstract,
a.abstract:focus ~ img.abstract {
    opacity: 1;
}

DEMO

If this approach is not flexible enough you might consider a JavaScript solution.

UPDATE

A combination of the hidden input and the class mapper. Please note the behavior is now more of toggle functionality. You can change the type of the input field to radio (and proper name attribute) to match the behavior to my previous demo.

THE trick is to use the labels to trigger the input fields. The placement of the input fields should be inside the image container so you can use the ~ selector in CSS.

DEMO

这篇关于当链接单击时更改照片不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！