假设有这样一段代码:
<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 上
当他改变焦点时,Selected div 应该再次变为 notSelected。
我想做这样的事情来增加所选 div 的文本大小。无论如何,进行其他更改也很酷,所以我更愿意更改类属性。
在 JavaScript 中执行此类操作的最佳方法是什么?是否有任何 JavaScript 框架可以促进我做这件事?所以很容易添加淡入淡出等效果......
我下载了 MooTools,但快速阅读了文档后,我不知道如何在没有任何表单 div 的特定 ID 的情况下执行此操作,但这是我第一次使用它。我使用任何其他框架都没有问题,但如果你建议一个,请写下我应该具体寻找什么。
最佳答案
这个问题还有一个纯 CSS 解决方案。但是,它在 MSIE 6 中不起作用。从技术上讲,它的工作方式类似于 Tomalek 的解决方案,但它不是使用 JavaScript 来切换元素的类,而是使用 CSS 来切换其样式:
.selectable { /* basic styles … */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }
关于javascript - 当焦点是 "inside"时如何改变一个元素/容器的样式呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/216185/