자바로 의사 요소 컨트롤

Question

talkbubble 스타일이 지정된 div-box를 클릭하면 색상이 완전히 변경됩니다. 여기서 볼 수 있듯이

나는, 내가 실제로 요소의 나머지 부분과 색상을 변경합니다 (talkbubble에 대한 화살표를 형성하는 )를 사용하고있어 :before 의사 요소를지고의 문제로 실행 :

HTML

<div class="clickables"> 
     <div class="talkbubble"> 
      <input type="hidden" class="tbselector" value="sbselection_1"> 
      <div class="thumbnail"> 
       <img src="images/thumbnail1.png" height="33" width="30" /> 
      </div> 
      <div class="words">Commons</div> 
     </div> 
     <div class="talkbubble"> 
      <input type="hidden" class="tbselector" value="sbselection_2"> 
      <div class="thumbnail"> 
       <img src="images/thumbnail1.png" height="33" width="30" align="middle" /> 
      </div> 
      <div class="words">crossroads</div> 
     </div> 
     . 
     . More and more 
     . 
    </div> 
</div> 

CSS^{그냥 관련}

,451,515,

.talkbubble { 
    background: white; 
    color: rgb(0,0,0); 
    height: 40px; 
    margin-top: 1%; 
    margin-left: 48%; 
    margin-right: auto; 
    position: relative; 
    width: 150px;  
} 
.talkbubble:before { 
    border-top: 10px solid transparent; 
    border-right: 10px solid white; 
    border-bottom: 10px solid transparent; 
    content:""; 
    height: 0; 
    position: absolute; 
    right: 100%; 
    top: 10px; 
    width: 0;  
} 
.talkbubble:before.clicked { 
    border-right-color:#666666; 
} 
.talkbubble:hover{ 
    background-color: rgb(194,194,194)!important; 
    color:rgb(255,255,255); 
} 
.talkbubble:hover:before{ 
    border-right-color: rgb(194,194,194)!important; 
} 

JQUERY 여기

$('.clickables').on('click','.talkbubble',function() { 
    $(this).parent().find('.talkbubble').css('background-color','#ffffff'); 
    $(this).css('background-color', '#666666'); 
}); 

내가 몇 가지 연구를 데모 http://jsfiddle.net/petiteco24601/3xuuq2fx/

이며 약간의 결정적 보인다. 대부분의 경우, 내가 발견 한 많은 것은 기본적으로 pseudo 요소가 실제로 존재하지 않기 때문에 의사 요소에 실제로 javascript를 강제 적용 할 수있는 방법이 없다고 기본적으로 말합니다.

그러나 더 많은 연구를 통해 및 Change an HTML5 input's placeholder color with CSS과 같은 버그가 발견되었으며 이러한 버그는 수정되었으며 일부 브라우저에서는 의사 요소에 javascript를 사용할 수 있다고합니다. 실제 거래는 무엇입니까? 사람이 의사 요소를 얼마나 광범위하게 제어 할 수 있습니까?

Answer 1

당신이 갈 수있는 방법은 새 클래스를 추가하거나 제거하는 것입니다.

• 먼저 CSS에서 !important 선언을 제거하는 것이 좋지 않으며 나중에 충돌 할 수 있습니다.

• 그런 다음 당신이 원하는 변화와 새로운 클래스를 만들 :

  JQuery와 클래스 추가/제거와 그런

  .clicked { 
      background:#666; 
  } 
  .clicked:before { 
      border-right-color:#666; 
  } 
  

• :

  $('.clickables').on('click','.talkbubble',function() { 
      $(this).siblings('.talkbubble').removeClass('clicked'); 
      $(this).addClass('clicked'); 
  }); 
  

확인이 DemoFiddle

Answer 2

을 의사 CSS 선언을 변경할 수있는 유일한 방법은 개별 요소 인 <style> 태그를 만들고 해당 태그가 적용된 요소의 클래스와 연결되어 있어야합니다. I.E.

<style id="talkbubble_style"> 
    .talkbubble:before{ 
    border-right-color:#666666; 
    } 
</style> 

그래서 당신은 클릭 이벤트를 처리 할 때, 당신은 스타일 요소를 얻고 !important 옵션은 각각의 정의에 추가와 함께, 당신이 원하는 CSS에 innerHTML을 변경합니다. 이와 같이 :

$('.clickables').on('click','.talkbubble',function() { 
    $(this).parent().find('.talkbubble').css('background-color','#ffffff'); 
    $(this).css('background-color', '#666666'); 
    $('#talkbubble_style').html('.talkbubble:before{border-right-color:#666666!important;}'); 
}); 

Answer 3

자바 스크립트를 사용하지 않고 CSS 솔루션을 찾고있는 경우.여기있다 :

Working Fiddle

내가 HTML 코드의 라벨 및 라디오 버튼과 각 목록 항목 블록을 감쌌다. 단코에 의해 제안도 !important을 제거

.talkbubble { 
    display: inline-block; 
    /* other styles */ 
} 

:checked + .talkbubble { 
    background-color: #666; 
} 
:checked + .talkbubble:before { 
    border-right-color: #666; 
} 
:checked + .talkbubble:hover:before { 
    border-right-color: #666; 
} 
.clickables input[type="radio"] { 
    position: absolute; 
    visibility: hidden; 
    pointer-events: none; 
} 

.. 그리고 : 및 CSS에 다음 코드를 추가했습니다.