如何改变元素/容器的风格时，重点是“内部”的呢？

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的风格选择时：

• 用户焦点的输入元件上
• 用户将鼠标移动到一个notSelected DIV

当他改变焦点的选择Div时应该成为再次notSelected。

我想这样做，以增加选择的div的文本的大小。反正它可能是冷静作出其他变化太大，所以我宁愿更改类属性。

什么是做这样的事情在JavaScript中的最佳方式？是否有任何JavaScript框架，可以提高我在做这件事情？因此，这将是很容易添加像褪色等影响...

我下载MooTools的，但与文档的快速读取，我没有看到如何做到这一点，而无需任何形式的DIV的特定ID，但是是我第一次使用它。我已经使用任何其他框架没有问题，但如果你认为一个，请写还我应该找专门。

Answer 1

我建议看看jQuery的为您的任务。这是很容易学习，迅速产生不错的效果。但只有你所描述的效果，纯JavaScript也将是足够的。

让你的DIV总是有所谓的“选择”类。以后还可以切换其他CSS类。创建一个名为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");
    }
  );
});

这是未经测试所以有可能是它一个小故障，但它会给你一般知道从哪里开始。

P.S：鼠标移动更改文字大小可能不是最好的所有想法。它导致重新安排页面布局是恼人的用户。

Answer 2

还有一个纯CSS解决这个问题。但是，它不MSIE 6在技术上的工作，其工作原理类似于Tomalek的解决办法，但不是使用JavaScript来切换元素的类，它使用CSS来切换它的风格：

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

Answer 3

@Tomalak：

你为什么要查询DOM四次？

小编辑，而是一个巨大的速度效益：

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

Answer 4

这有点无关，但标签标签不围绕输入标签。你给的标签标签“的”属性对应于输入元素的ID。例，

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

Answer 5

另一个不相关的到最原始的问题的答案，但... jQuery的也有做鼠标悬停/鼠标移开东西称为悬停替代语法。

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

例，

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

对不起，那些双$的，我似乎无法弄清楚如何逃脱。