当焦点在“内部”时如何更改元素/容器的样式？答案

【问题标题】：How to change the style of an element/container when the focus is "inside" it?当焦点在“内部”时如何更改元素/容器的样式？
【发布时间】：2010-09-17 23:42:31
【问题描述】：

假设有这样的代码：

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

当他改变焦点时，选定的 div 应该再次变为 notSelected。

我想做这样的事情来增加所选 div 的文本大小。无论如何，进行其他更改也可能很酷，所以我更愿意更改类属性。

在 JavaScript 中执行此类操作的最佳方法是什么？有什么 JavaScript 框架可以帮助我做这件事吗？所以添加淡入淡出等效果会很容易......

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

【问题讨论】：

标签： javascript javascript-framework

【解决方案1】：

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

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

【讨论】：

但不兼容旧版浏览器。 IE6 仍然被广泛使用，不支持 A 以外的元素上的 hover 伪类。
@Tomalak：我在文中说过。然而，无论如何，越来越多的新应用程序正在放弃对 IE6 的支持。这是否可取是另一个问题。结合优雅的降级，这显然是一种选择，尤其是因为纯 CSS 方法也比 JavaScript 具有优势（不是每个人都有）。
哦，我忽略了那句话。对不起。 CSS 比 JavaScript 快很多，而且声明式语法也更漂亮。如果我确定“浏览器受众”，我也会走这条路。
要走的路。当专门为它设计悬停伪类时，为任务使用脚本是“错误的”。当然，如果没有该功能，该网站将无法使用，而且 IE6 用户很重要，您做您该做的。
这将如何更改活动输入的容器元素？是否有一个选择器显示“这个 DIV 包含一个活动的 INPUT”？

【解决方案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");
    }
  );
});

这是未经测试的，因此可能存在故障，但它会让您大致了解从哪里开始。

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

【讨论】：

感谢您的提示，但它可以用于表单的某个区域。比如有一次他关注登录区，或者个人资料区，就举例，再次感谢！

【解决方案3】：

@Tomalak：

你为什么要查询 DOM 四次？

一个小的修改，但一个巨大的速度优势：

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

【讨论】：

【解决方案4】：

这有点不相关，但是标签标签没有包含输入标签。您为标签标签提供一个“for”属性，该属性对应于输入元素的 ID。例如，

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

【讨论】：

虽然 label-for 是通常的做法，但实际上将输入放在标签内是非常有效的。

【解决方案5】：

还有另一个与原始问题无关的答案，但是... jQuery 还有一种替代语法来执行鼠标悬停/鼠标悬停操作，称为悬停。

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

例子，

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

对不起，那些双 $'s，我似乎无法弄清楚如何逃避它。

【讨论】：