当焦点位于元素/容器“内部”时,如何更改元素/容器的样式?
-
03-07-2019 - |
题
假设有这样的代码:
<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 上
当他改变焦点时,Selected div 应该再次变为 notSelected。
我想做这样的事情来增加所选 div 的文本大小。无论如何,进行其他更改也可能很酷,所以我更愿意更改类属性。
在 JavaScript 中执行此类操作的最佳方法是什么?有没有任何 JavaScript 框架可以帮助我做这件事?所以添加淡入淡出等效果会很容易......
我下载了 MooTools,但快速阅读了文档后,我不知道如何在没有任何表单 div 的特定 ID 的情况下执行此操作,但这是我第一次使用它。我使用任何其他框架都没有问题,但如果你建议一个,请写下我应该具体寻找什么。
解决方案
我建议您查看 jQuery 来完成您的任务。它非常容易学习并且快速产生良好的效果。但仅凭你所描述的效果,纯 JavaScript 就足够了。
让你的 DIV 始终有一个名为“selectable”的类。您可以稍后切换其他 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");
}
);
});
这尚未经过测试,因此可能存在故障,但它会让您大致了解从哪里开始。
附:在鼠标移动时更改文本大小可能不是所有想法中最好的。它会导致重新排列页面布局,这对用户来说很烦人。
其他提示
对于这个问题还有一个纯 CSS 解决方案。但是,它在 MSIE 6 中不起作用。从技术上讲,它的工作原理与 Tomalek 的解决方案类似,但它不使用 JavaScript 来切换元素的类,而是使用 CSS 来切换其样式:
.selectable { /* basic styles … */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }
@托马拉克:
为什么要查询 DOM 四次?
一个小的编辑,但是一个巨大的速度优势:
$("div.selectable").mouseover(function ()
{
// ...
}).mouseout(function ()
{
// ...
});
这有点无关,但标签标签不包含输入标签。您为 label 标签赋予一个“for”属性,该属性对应于输入元素的 ID。例子,
<label for="username">Username</label>
<input type="text" name="username" value="Enter your username..." id="username" />
另一个与原始问题无关的答案,但是......jQuery 还有一种用于执行鼠标悬停/鼠标悬停操作的替代语法,称为悬停。
$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });
例子,
$('ul#nav li').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
抱歉那些双美元,我似乎不知道如何摆脱它。