어떻게 내가 저장 버튼이

Question

"기본"버튼 스타일을 복원 할 수 있습니다 위에 사용자가 마우스를 올리면, 내가 어떤 스타일을 변경할 때 - 예를 들면 : 마우스 버튼을 잎

$('.saveButton').mouseover(function() { 
    $(this).css("background-color", "red"); 
    $(this).parents('fieldset').css("border", "2px solid red"); 
}); 

, I 원본을 복원 할 :

$('.saveButton').mouseout(function() { 
    $(this).css("background-color", "#EEE"); 
    $(this).parents('fieldset').css("border", "1px solid gray"); 
}); 

을 그러나, 문제를 제쳐두고이 코드는 버튼이 둥근 모양을 잃고 실행하고, 사각형 모서리가있는 경우 기본 버튼 배경색이 #EEE, 여부.

가능합니까?

Answer 1

내가 직접 속성을 설정하지 제안, 대신 클래스/클래스를 설정합니다 :

$('.saveButton').mouseover(function() { 
    $(this).addClass('highlight'); 
    $(this).parents('fieldset').addClass('highlight'); 
}).mouseout(function() { 
    $(this).removeClass('highlight'); 
    $(this).parents('fieldset').removeClass('highlight'); 
}); 

.saveButton.highlight { /* Double class selector is broken in IE6 */ 
    background-color: red; 
} 

fieldset.highlight { 
    border: 1px solid red; 
} 

으로 어떤 이유로 그렇게하지 않으려면, 속성을 특정 값으로 설정하는 대신 빈 문자열로 설정하는 것입니다.

$('.saveButton').mouseout(function() { 
    $(this).css("background-color", ""); 
    $(this).parents('fieldset').css("border", ""); 
}); 

Answer 2

예, 클래스와 일부 CSS를 사용 :

/* in style.css */ 
.over { 
    border: 2px solid red; 
} 
.over .saveButton { 
    background-color: red; 
} 

그런 다음 추가/부모 필드 셋이 클래스를 제거합니다

$('.saveButton').mouseover(function() { 
    $(this).parents('fieldset').addClass('over'); 
}).mouseout(function() { 
    $(this).parents('fieldset').removeClass('over'); 
}); 

버튼을 되돌아갑니다 클래스를 제거 및 필드 상태 그들은 그 전에 있었다. 좋은 방법으로

---

- 그것은 그런 식으로 관리하는 것이 훨씬 쉽다 - CSS에서 프레젠테이션을 (상황이 어떻게 보이는지) 유지하고 그들 사이를 전환 할 자바 스크립트를 사용하는 것이 좋습니다.

Answer 3

가장 좋은 침대는 mouseover에서 추가 할 스타일에 대한 CSS 클래스를 만들고 "addClass"를 사용하여 jQuery로 추가하는 것입니다. 그런 다음 "removeClass"를 사용하여 임시 스타일을 제거하면됩니다.

Answer 4

예, 빨간색으로 BG 색상과 테두리 색상을 만드는 mouseEnter에 대한 클래스를 설정할 수 있습니다 : 그것은 그 속성을 "제거"해야한다.

이벤트에 대해 toggleClass를 사용하면 이벤트를 토글하고 전환하여 클래스를 추가 및 제거하고 항상 기본 버튼으로 복원 할 수 있습니다.

Answer 5

이것은 CSS-:hover pseudo-clas에 훨씬 적합합니다. 그리고 자바 스크립트보다 훨씬 빠릅니다.

.fieldset-class:hover { border: 2px solid red;} 
.saveButton:hover { background-color:red;} 

만, 마우스 오버 /로 마우스 이벤트에 CSS를 변경하려면이 방법을 사용해야하는 시간입니다.

여기에 CSS :hover의 live example from Soh Tanaka이 있습니다. 바에있는 팝업 툴팁 은요? 순수한 CSS.

업데이트
문제 모델과 관련하여 CSS에 결함이 있습니다.이렇게하면 단추를 가리키지 않아도 필드 세트의 호버가 실행됩니다. CSS에서 두 번째 줄인 .saveButton:hover을 사용하고 다른 답변에서 지적한대로 클래스를 사용하여 fieldset hover에 JavaScript를 사용합니다. 이것은 최적의 솔루션입니다