Question

我正在寻找一种方法来控制悬停时特定项目的CSS。因为它不是直接在父谱系中的元素，所以我不能使用CSS。

<article class="portfolio-item web">
  <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
    <img src="http://localhost/wordpress/wp-content/themes/dewuske/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或如何从它们调用事件，尤其是这样。感谢

Answer 1

JQuery提供了几种可能对您有所帮助的方法。

你可以使用.css()方法手动设置CSS，或者使用.addClass()和.removeClass()动态地将CSS类应用于元素（这是我的首选方式）方法，对鼠标悬停等用户事件做出反应

NB：这是具体解决您问题所带来问题的jQuery解决方案。

Answer 2

在jQuery中，您可以使用addClass和removeClass函数。将所有css保存在css文件中，然后只需更改每个元素的类。

http://api.jquery.com/addclass/

Answer 3

您需要创建一个包含要应用的样式的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"); });
});

如果您在页面上有多篇文章，它也会有效。

Answer 4

您可以创建CSS类，然后在悬停时将其添加到容器中，然后在鼠标移出后删除该类：

$('.beaconContainer img').hover(function(){
    $( this ).addClass(cssClassName);
  }, function() {
   $( this ).removeClass(cssClassName);
  }
);

通过JavaScript或jQuery控制CSS

4 个答案: