单击链接时更改照片不透明度

我试图在他们的类别之上创建一个照片库。 如何在单击类别链接时使特定照片的不透明度增加（或减少）？ 我不确定我是否可以用css实现这一点。 感谢每一位帮助

Answer 1

我会为每个类别创建一个类映射器。 它不仅仅是一个非常通用的CSS解决方案，但至少可以完成工作。

HTML

 sports cats fashion technics      

将类映射到锚点到图像。 在CSS3中，您可以使用~ twode选择器。

CSS

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

DEMO

如果这种方法不够灵活，您可以考虑使用JavaScript解决方案。

UPDATE

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

诀窍是使用标签来触发输入字段。 输入字段的位置应位于图像容器内，以便您可以在CSS中使用~选择器。

DEMO

Answer 2

这里很有趣:)

纯CSS！

通过选中“链接”状态进行改进

1. 标签可以看起来像一个链接，并在选择时更改。
2. 标签连接到具有匹配的for和id属性的复选框。
3. 复选框隐藏了display: none;
4. HTML元素的顺序很重要。

有一个改进的小提琴！

HTML

  
 Category One (click me)         

CSS

 input[type=checkbox] { display: none; } input[type=checkbox]:checked + .category img { transition: opacity 0.5s ease; opacity:0.5; } input[type=checkbox] + .category img { transition: opacity 0.5s ease; opacity:1; } label:hover { text-decoration: underline; cursor: pointer; color: blue; } label { display: block; } input[type=checkbox]:checked + .category label { font-weight: bold; color: #F00; } 

Answer 3

您可以使用jquery fadeTo函数

来自jquery api的例子

 
 Click here 
  // With the element initially shown, we can dim it slowly: $( "#clickme" ).click(function() { $( "#book" ).fadeTo( "slow" , 0.5, function() { // Animation complete. }); }); 

或者你可以使用简单的CSS

 img { opacity:1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } img:hover { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }