Javascript 当焦点位于元素/容器的“内部”时，如何更改元素/容器的样式？

假设有这样一个代码：

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

用户关注输入元素 用户将鼠标移动到选定的分区上 当他更改焦点时，所选的div应再次变为notSelected

我想这样做，以增加所选div文本的大小。无论如何，也可以进行其他更改，因此我更喜欢更改class属性

在JavaScript中执行类似操作的最佳方法是什么？有没有JavaScript框架可以帮助我做这件事？因此，它将很容易添加像褪色等效果

---

我下载了MooTools，但通过快速阅读文档，我没有看到如何在没有任何表单div的特定ID的情况下执行此操作，但这是我第一次使用它。我对使用任何其他框架都没有问题，但是如果您建议使用一个框架，请同时写下我应该特别寻找的内容。

我建议您在任务中使用jQuery。这是很容易学习和产生良好的效果很快。但仅凭您描述的效果，纯JavaScript也就足够了

使您的div始终有一个名为selective的类。以后可以切换其他CSS类。创建一个名为selected的CSS类，并为其提供所需的外观

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

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

---

注：在鼠标移动时改变文本大小可能不是最好的主意。这会导致重新安排页面布局，这对用户来说很烦人。

我建议您在执行任务时查看jQuery。这是很容易学习和产生良好的效果很快。但仅凭您描述的效果，纯JavaScript也就足够了

使您的div始终有一个名为selective的类。以后可以切换其他CSS类。创建一个名为selected的CSS类，并为其提供所需的外观

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

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

---

注：在鼠标移动时改变文本大小可能不是最好的主意。这会导致重新安排页面布局，这对用户来说很烦人。

对于这个问题，还有一个纯CSS解决方案。但是，它在MSIE6中不起作用。从技术上讲，它的工作原理与Tomalek的解决方案类似，但它没有使用JavaScript切换元素的类，而是使用CSS切换其样式：

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

---

这个问题还有一个纯CSS解决方案。但是，它在MSIE6中不起作用。从技术上讲，它的工作原理与Tomalek的解决方案类似，但它没有使用JavaScript切换元素的类，而是使用CSS切换其样式：

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

---

这有点不相关，但是标签标签并不包含输入标签。您为标签标记指定了一个对应于输入元素ID的属性。例如

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

---

这有点不相关，但是标签标签并不包含输入标签。您为标签标记指定了一个对应于输入元素ID的属性。例如

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

@托马拉克：

为什么要查询DOM四次

一个小的编辑，但一个巨大的速度优势：

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

@托马拉克：

为什么要查询DOM四次

一个小的编辑，但一个巨大的速度优势：

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

---

还有一个与原始问题答案无关，但。。。jQuery还有另一种用于执行mouseover/mouseout的语法，称为hover

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

例如

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

---

对不起，那些双美元，我似乎不知道如何摆脱它。

还有一个与原始问题答案无关的问题，但是。。。jQuery还有另一种用于执行mouseover/mouseout的语法，称为hover

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

例如

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

---

对不起，那些双美元，我似乎不知道如何摆脱它。

谢谢你的提示，但它可以用于表单的一个区域。例如，一旦他专注于登录区域或配置文件区域，就像示例一样，再次感谢您！谢谢您的提示，但它可以用于窗体的某个区域。例如，一旦他专注于登录区域或配置文件区域，就像示例一样，再次感谢您！但与旧浏览器不兼容。IE6仍然被广泛使用，不支持除A之外的元素上的hover伪类。@Tomalak：我在我的文本中说过。然而，无论如何，越来越多的新应用正在放弃IE6支持。这是否可取是另一个问题。结合优雅的降级，这显然是一种选择，特别是因为仅CSS的方法也比JavaScript有优势，不是每个人都有。哦，我忽略了这句话。很抱歉CSS比JavaScript快得多，而且声明性语法也漂亮得多。如果我对浏览器用户有信心，我也会走这条路。当专门设计悬停伪类时，为任务使用脚本是错误的

---

我很高兴。当然，该站点在没有功能和IE6用户的情况下是不可用的，你必须做你必须做的事情。这将如何改变活动输入的容器元素？是否有选择器在包含活动输入时显示此DIV？但与旧浏览器不兼容。IE6仍然被广泛使用，不支持除A之外的元素上的hover伪类。@Tomalak：我在我的文本中说过。然而，无论如何，越来越多的新应用正在放弃IE6支持。这是否可取是另一个问题。结合优雅的降级，这显然是一种选择，特别是因为仅CSS的方法也比JavaScript有优势，不是每个人都有。哦，我忽略了这句话。很抱歉CSS比JavaScript快得多，而且声明性语法也漂亮得多。如果我对浏览器用户有信心，我也会走这条路。当hover伪类是专门为任务设计的时，为任务使用脚本是错误的。当然，该站点在没有功能和IE6用户的情况下是不可用的，你必须做你必须做的事情。这将如何改变活动输入的容器元素？当包含活动输入时，是否有一个选择器显示此DIV？虽然标签for是执行此操作的常用方法，但实际上将输入放在标签内是非常有效的。虽然标签for是执行此操作的常用方法，但实际上将输入放在标签内是非常有效的。