当焦点在"里面"时,如何改变元素/容器的样式呢？

Question

假设有这样的代码:

<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>

现在假设我对表单的每个元素都有类似的东西(这只是一个例子).在以下情况下,我想将样式从notSelected更改为Selected:

• 用户专注于输入元素
• 用户将鼠标移到notSelected div上

当他改变焦点时,所选的div应该再次被选中.

我想做这样的事情来增加所选div文本的大小.无论如何,做其他更改也很酷,所以我更喜欢更改class属性.

在JavaScript中执行此类操作的最佳方法是什么？是否有任何JavaScript框架可以促使我做这件事？因此,添加褪色等效果会很容易...

我下载了MooTools,但是快速阅读文档,我没有看到如何在没有任何表格div的特定ID的情况下执行此操作,但这是我第一次使用它.我没有使用任何其他框架的问题,但如果你建议一个,请写下我应该具体寻找什么.

Answer 1

还有一个纯CSS解决方案来解决这个问题.但是,它在MSIE 6中不起作用.从技术上讲,它的工作方式类似于Tomalek的解决方案,但它不使用JavaScript来切换元素的类,而是使用CSS来切换其样式:

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

Answer 2

我建议你看一下jQuery来完成你的任务.这很容易学习并快速产生好的效果.但是你所描述的效果,纯JavaScript也足够了.

让你的DIV总是有一个叫做"可选"的类.您可以稍后切换其他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");
    }
  );
});

这是未经测试的,所以可能会有一个小故障,但它会给你一般的想法从哪里开始.

PS:在鼠标移动时更改文本大小可能不是所有想法中最好的.它导致重新排列对用户来说烦人的页面布局.