0

我正在根据他们的蓝图框架主题为 koken 构建一个自定义主题并对其进行编码，以便专辑模板循环遍历专辑中的所有图像，并使用 CSS 和 jquery 脚本将图像输出到一个 4 列的类似砖石的网格中，以便当我将鼠标悬停在图像上时，它会将网格中所有其他图像的不透明度更改为 0.4。

带有网格的 jquery 代码在 JSFiddle 中可以正常工作，但是当我将它带入 koken 主题时，每当图像悬停时，脚本会工作一秒钟，以降低不透明度显示除悬停图像之外的所有图像，然后隐藏除悬停图像之外的所有图像对于悬停的图像和第一列。

用于网格的代码如下：

HTML

<main>
<div id="grid">
    <ul>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
    </ul>
</div>

CSS

#grid {
    /* Prevent vertical gaps */
    line-height: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    -moz-column-count: 4;
    -moz-column-gap: 0;
    column-count: 4;
    column-gap: 0;
}
#grid img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
}
#grid ul li {
    display: inline;
}
.gridimg {
    opacity:1;
    transition: opacity 0.5s;
}
.opaque {
    opacity:0.4;
    transition: opacity 0.5s;
}

JS

$('img.gridimg').hover(function () {
    $('img.gridimg').not(this).each(function () {
        $(this).toggleClass("opaque");
    });
});

JSFiddle 在这里：http: //jsfiddle.net/jgYY9/3/

koken 代码中有什么东西把这搞砸了吗？有谁知道我该如何解决？

谢谢。

4

0 回答 0