javascript - 通过 JavaScript 或 jQuery 控制 CSS

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() 将 CSS 类动态应用到元素(这是我的首选方式)和 .removeClass()方法，对鼠标悬停等用户事件作出 react 。

注意:这是特别是针对您的问题提出的问题的 jQuery 解决方案。