제어 CSS 자바 스크립트 또는 jQuery를

를 통해 내가 가져가의 특정 항목에 대한 CSS를 제어 할 수있는 방법을 찾고 있어요. 상위 계보에서 직접 요소가 아니기 때문에 CSS를 사용할 수 없습니다.제어 CSS 자바 스크립트 또는 jQuery를

<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 */ 
}

와 마우스가 beaconContainer 위에있을 때 당신의 스타일을 사용할 수 jQuery를 조금 : 스타일 당신이 적용 할

$('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) 대표를 보상 할 수있다 생각합니다. 건배. –

제어 CSS 자바 스크립트 또는 jQuery를

답변

관련 문제