我有一个带有漂亮照片库的网页。每个图像缩略图都有不同颜色的叠加层(当您将鼠标悬停在图像上时)。我有 4 个类别,每个类别都有不同的缩略图覆盖颜色,这很好。
但我还有第 5 个类别,其中显示了画廊中的所有图像,在这里我想要所有图像的缩略图叠加的另一种颜色。
这是用于选择类别的 html:
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
<li><a data-filter="article.portfolio[data-category~='grafica']" href="#">Grafica</a></li>
<li><a data-filter="article.portfolio[data-category~='gravura']" href="#">Gravura</a></li>
<li><a data-filter="article.portfolio[data-category~='pictura']" href="#">Pictura</a></li>
<li><a data-filter="article.portfolio[data-category~='desen']" href="#">Desen</a></li>
</ul>
</div>
这就是我在图像中调用的方式:
<section class="portfolio_container">
<article class="portfolio" data-category="grafica">
<section class="thumbImage">
<img src="images/gallery/afirmarea-thumb.jpg" alt="" class="fullwidth">
<div class="grafica-wrap">
<div class="thumbText">
<h3 class="sectionTitle">Afirmarea</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/afirmarea.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
是否可以使用 jquery 更改<div class="grafica-wrap">
(这会添加缩略图叠加层,并且当它处于活动状态时,每个菜单项 [类别] 都有一个不同的菜单项:
<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>