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

How to change the style of an element/container when the focus is "inside" it?

本文关键字：元素 样式 何更改 内部 于元素 焦点      更新时间：2023-09-26

假设有这样的代码：

<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的情况下执行此操作，但是这是我第一次使用它。我使用任何其他框架都没有问题，但如果您建议使用，请也写下我应该特别寻找的内容。

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

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

我建议看看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：在鼠标移动时更改文本大小可能不是所有想法中最好的。它导致重新排列页面布局，这对用户来说很烦人。

@Tomalak：

为什么要查询 DOM 四次？

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

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

这有点不相关，但标签标签不包围输入标签。为标签标签提供一个与输入元素的 ID 对应的"for"属性。例

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

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

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

例

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

对不起那些双$，我似乎不知道如何逃避它。

相关文章：