초점이 "내부"에있을 때 요소/컨테이너의 스타일을 변경하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/216185

문제

다음과 같은 코드가 있다고 가정합니다.

<div class="notSelected">
      <label>Name
          <input type="text" name="name" id="name" />
      </label> 
      <div class="description">
          Tell us what's your name to make us able to fake to be your friend 
          when sending you an email.
      </div>
</div>

이제 양식의 각 요소에 대해 이와 같은 것이 있다고 가정 해 봅시다. 다음과 같은 경우 스타일을 선택하지 않은 것에서 선택한 것으로 변경하고 싶습니다.

  • 사용자는 입력 요소에 중점을 둡니다
  • 사용자는 마우스를 선택하지 않은 div로 이동합니다

그가 초점을 바꾸면 선택된 div는 다시 선택하지 않아야합니다.

선택한 div의 텍스트의 크기를 증가시키기 위해 이와 같은 일을하고 싶습니다. 어쨌든 그것은 멋질 수 있습니다. 다른 변경도 만들 수 있으므로 클래스 속성을 변경하는 것을 선호합니다.

JavaScript에서 이와 같은 일을하는 가장 좋은 방법은 무엇입니까? 이 작업을 수행 할 수있는 JavaScript 프레임 워크가 있습니까? 따라서 페이딩 등과 같은 효과를 추가하기가 쉽습니다 ...

나는 mootools를 다운로드했지만 문서를 빠르게 읽으면 양식 DIV에 대한 특정 ID를 갖지 않고이 작업을 수행하는 방법을 보지 못했지만 처음 사용하는 것은 처음입니다. 다른 프레임 워크를 사용하는 데 아무런 문제가 없지만 제안을 제안하면 구체적으로 무엇을 찾아야하는지 작성하십시오.

도움이 되었습니까?

해결책

나는 당신의 과제를 위해 jQuery를 살펴 보는 것을 추천합니다. 배우기가 매우 쉽고 빠르게 좋은 효과를냅니다. 그러나 설명 된 효과만으로도 순수한 JavaScript도 충분할 것입니다.

DIV에 항상 "Selectable"이라는 클래스를 갖도록하십시오. 나중에 다른 CSS 클래스를 전환 할 수 있습니다. "Selected"라는 CSS 클래스를 만들고 원하는 모양을 제공하십시오.

<div class="selectable">  (=off) vs. <div class="selectable selected"> (=on)

그런 다음 문서의 스크립트 섹션에 이와 같은 것을 추가하십시오.

$(document).ready(function(){

  // handle mouseover and mouseout of the parent div
  $("div.selectable").mouseover(
    function() { 
      $(this).addClass("selected").addClass("mouseIsOver");
    }
  ).mouseout(
    function() { 
      $(this).removeClass("selected").removeClass("mouseIsOver");
    }
  );

  // handle focus and blur of the contained input elememt,
  // unless it has already been selected by mouse move
  $("div.selectable input").focus(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").addClass("selected");
    }
  ).blur(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").removeClass("selected");
    }
  );
});

이것은 테스트되지 않았으므로 결함이있을 수 있지만 어디서부터 시작 해야하는지 일반적인 아이디어를 제공합니다.

추신 : 마우스 이동에서 텍스트 크기를 변경하는 것이 모든 아이디어 중에서 가장 좋은 것은 아닐 수 있습니다. 사용자에게 성가신 페이지 레이아웃을 재 배열로 이어집니다.

다른 팁

이 문제에 대한 순수한 CSS 솔루션도 있습니다. 그러나 MSIE 6에서는 작동하지 않습니다. 기술적으로는 Tomalek의 솔루션과 유사하지만 JavaScript를 사용하여 요소의 클래스를 전환하는 대신 CSS를 사용하여 스타일을 전환합니다.

.selectable { /* basic styles …  */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }

@Tomalak :

DOM을 4 번 쿼리하는 이유는 무엇입니까?

소규모 편집이지만 큰 속도-이익 :

$("div.selectable").mouseover(function ()
{
    // ...
}).mouseout(function ()
{
    // ...
});

이것은 다소 관련이 없지만 레이블 태그는 입력 태그를 동봉하지 않습니다. 입력 요소의 ID에 해당하는 레이블 태그 A "for"속성을 제공합니다. 예시,

<label for="username">Username</label>
<input type="text" name="username" value="Enter your username..." id="username" />

또 다른 관련이없는 원래의 질문 답변이지만 ... jQuery는 또한 마우스 오버/마우스 아웃 작업을 수행하기위한 대체 구문이 있습니다.

$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });

예시,

$('ul#nav li').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

이중 $ 's에 대해 죄송합니다. 어떻게 탈출하는지 알 수 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top