通過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

回答

相關問題