我正在寻找一种方法来控制悬停时特定项目的 CSS。由于它不是直接位于父系中的元素,因此我无法使用 CSS。
<article class="portfolio-item web">
<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
<img src="http://localhost/wordpress/wp-content/themes/.../images/portfolio/introspection.jpg" alt="">
<span class="genericBeaconIsotope">
<span class="beaconContainer">
<span class="beaconBar"></span>
<span class="beaconCircle1"></span>
<span class="beaconCircle2"></span>
<span class="beaconText">Introspection</span>
</span>
</span>
</a>
</article>
我试图将鼠标悬停在 beaconContainer 上并使图像受到影响。它的功能应该类似于翻转。这是我试图在 CSS 中实现的目标:
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
transition: all 1s ease-out 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
我该如何去做呢?我对 JavaScript 或 jQuery 知之甚少,也不知道如何从它们调用事件,尤其是像这样。谢谢
JQuery 提供了几种可能对你有帮助的方法。
您可以使用 .css() 方法手动设置 CSS,或者使用 .addClass() 和 .removeClass() 将 CSS 类动态应用到元素(这是我的首选方式) 方法,对用户事件(例如鼠标悬停等)做出反应。
注意:这是特别针对您的问题提出的问题的 jQuery 解决方案。
在jQuery中,您可以使用addClass和removeClass函数。将所有 css 保留在 css 文件中,然后只需更改每个元素的类即可。
您需要使用要应用的样式创建一个 CSS 类:
.rollover {
/* your styles here */
}
以及一些 jQuery,当鼠标悬停在 beaconContainer 上时启用您的样式:
$('article.portfolio-item.web').each(function(index, articleElem) {
var article = $(articleElem);
var image = article.find('img');
var container = article.find('.beaconContainer');
container.mouseover(function() { image.addClass("rollover"); });
container.mouseout(function() { image.removeClass("rollover"); });
});
如果页面上有多篇文章,它也将起作用。
您可以创建 CSS 类,然后在鼠标悬停时将其添加到容器中,然后在鼠标移出时删除该类:
$('.beaconContainer img').hover(function(){
$( this ).addClass(cssClassName);
}, function() {
$( this ).removeClass(cssClassName);
}
);