通过JavaScript或jQuery控制CSS

我正在寻找一种方法来控制悬停时特定项目的CSS。由于它不是直接在父系中的元素，我不能使用CSS。通过JavaScript或jQuery控制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知之甚少，或者知道如何从它们调用事件，特别是像这样。谢谢

来源

2014-04-28 Chris DeWuske

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

你可以去使用.css()方法有关手动设置的CSS，或动态地应用CSS类元素（这是将是我的优选方式）利用.addClass()和.removeClass()方法，反应以用户事件，例如鼠标悬停，等

注意：这是具体一个jQuery解决您的问题提出的问题。

来源

2014-04-28 21:01:47

只适用于jQuery库。你应该提到这一点。 – vol7ron

非常好的一点，我会补充说明。 –

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

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

来源

2014-04-28 21:01:53

-1

您可以创建CSS类，然后将其添加到容器中，当你将鼠标悬停，然后删除类，一旦你的鼠标了：

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

来源

2014-04-28 21:03:36

他想影响图像，而不是“beaconContainer”。否则，你真的不应该为此使用jQuery。 – Bergi

谢谢，但他是对的。我会用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"); }); 
});

如果您在页面上有多篇文章，它也可以工作。

来源

2014-04-28 21:27:03

我是这个网站的新手，所以我无法评价这个答案，但请给我Maciej正面反馈。这个答案就像我需要的那样工作。我不完全确定它是如何知道它是一个需要影响的“这个”元素，但它像一种魅力。 –

我认为你能够通过接受我的回答（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）来奖励我25名代表。干杯。 –

通过JavaScript或jQuery控制CSS

回答

相关问题