Question

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

Answer 1

这是非常有趣的事情：）

纯CSS！

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

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

HTML

<input type="checkbox" id="linkOne" />
<div class="category">
    <label for="linkOne">Category One (click me)</label>
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
</div>

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 2

您可以使用jquery fadeTo函数

来自jquery api

的示例

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// 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 */
}

Answer 3

我会为每个类别创建一个类映射器。它不仅仅是一个非常通用的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/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>

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

<强> CSS

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

DEMO

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

<强>更新

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

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

DEMO

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

3 个答案: