입력 포커스/흐림 효과시 CSS 클래스 제거/추가

일부 입력 필드가있는 양식과 약간의 설명이있는 각 입력 오른쪽에 약간 <div>이 있습니다. 내가 원하는 것은 각 입력 자체에 대해 CSS 클래스를 사용하는 것입니다. 자체 설명이있는 <div>입니다.입력 포커스/흐림 효과시 CSS 클래스 제거/추가

여기서 작업 예제를 작성했습니다 : http://jsfiddle.net/VL2FH/8/. 입력의 포커스 상태에서 호버 (hover) 상태 인 <div>을 사용합니다.

내가 물어보고 싶은 것은 : 거기는 "바로 가기"어떤 종류가 그래서 필요가 없습니다 : 양식의 각 입력 필드에서

$('#submit_name').bind('blur', function(){ 
    $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc'); 
}); 
$('#submit_name').bind('focus', function(){ 
    $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover'); 
});

합니다.

출처

2012-06-23 Morten Hagh

http://jsfiddle.net/joycse06/VL2FH/11/ –

정확히 이렇게하면! 이것은 절대적으로 완벽합니다! 대답 해 주시겠습니까? –

좋아, 대답 해. –

당신은 당신의 설명 divs가 입력 요소 옆에 있다면, 그것은 잘 작동이

$('input').on('blur', function(){ 
    $(this).next('div').removeClass('input-desc-hover').addClass('input-desc'); 
}).on('focus', function(){ 
    $(this).next('div').removeClass('input-desc').addClass('input-desc-hover'); 
});

처럼 focus and blur 콜백을 일반화 할 수 있습니다.

이벤트 바인딩에는 .on()을 사용하는 것이 더 좋습니다.

데모 :http://jsfiddle.net/joycse06/VL2FH/11/

출처

2012-06-23 13:31:25

+1 간단한 해결책입니다.나는 복잡한 일을하는 경향이있다. :) –

1000을 고맙게 생각한다. :) 그리고이 솔루션은 다른 이름/이드 등으로 다른 양식을 가지고있는 사이트에서 재사용 할 수있다. –

@MiroslavPopovic, 감사합니다. :) –

요소를 선택하기 위해 ID 대신 클래스를 사용하십시오. 당신의 입력 요소가 submit-name 클래스와 설명 desc 클래스가있는 경우는 다음과 같이 그것을 할 수 :

$('.submit-name').bind('blur', function(){ 
    $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc'); 
}).bind('focus', function(){ 
    $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover'); 
});

$("~ .desc", this).first() 클래스 desc로 입력 요소 (this)의 첫 번째 형제를 선택합니다. $(this).next()와

Joy's solution 그래도 훨씬 더 http://jsfiddle.net/miroslav/VL2FH/13/

편집 :

는 여기에 대한 업데이트 jsFiddle을합니다.

출처

2012-06-23 13:22:53

확인이 울부 짖는 소리 예제 프로그램

<html> 
     <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function() 
       { 

        $('#submit_name').bind('blur', function() 
        { 
         $('#submit_name-desc').removeClass('cls1').addClass('cls2'); 
        }); 

        $('#submit_name').bind('focus', function() 
        { 
         $('#submit_name-desc').removeClass('cls2').addClass('cls1'); 
        }); 
       }); 
      </script> 

      <style> 
       .cls1 
       { 
        background-color: #ccc;     
       } 

       .cls2 
       { 
        background-color: #fff; 
       } 
       .submit_name-desc 
       { 
        height: 30px; 
        border: 1px; 
       } 
      </style> 
     </head> 
     <body> 
      <input type="text" id="submit_name" /> 
      <div id="submit_name-desc"> 
       Name Description 
      </div> 
     </body> 
    </html>

출처

2012-06-23 13:32:20 Hearaman

또한 단지 어떤 .input-desc 직접 다음과 너무 인접 형제 선택 +를 사용하여 CSS에서 같은 효과를 얻을 수 있습니다 초점을 맞춘 입력에는 다른 규칙이 적용됩니다.

input:focus + .input-desc { 
    cursor: default; 
    width: 265px;  
    -moz-box-shadow: 0px 2px 5px #aaaaaa; 
    -webkit-box-shadow: 0px 2px 5px #aaaaaa; 
    box-shadow: 0px 2px 5px #aaaaaa; 
    animation:desc 0.3s; 
    -moz-animation:desc 0.3s; /* Firefox */ 
    -webkit-animation:desc 0.3s; /* Safari and Chrome */ 
}

인접 형제 선택자 버전 8. 다음 (http://reference.sitepoint.com/css/adjacentsiblingselector)

에서 최신 브라우저와 Internet Explorer의 지원은 바이올린 것입니다 : 이것처럼 http://jsfiddle.net/VL2FH/14/

출처

2012-06-23 22:54:04 jussinen

입력 포커스/흐림 효과시 CSS 클래스 제거/추가

답변

관련 문제