Question

我正在基于他们的Blueprint框架主题为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代码中有什么东西搞砸了吗？有谁知道我怎么解决它？

感谢。

使用JQuery .hover的CSS Masonry Grid将图像隐藏在除了悬停图像和第一列之外的网格中

0 个答案: