代码之家  ›  专栏  ›  技术社区  ›  Andrea Ambu

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

  •  1
  • Andrea Ambu  · 技术社区  · 16 年前

    假设有这样的代码:

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

    当他更改焦点时,所选的DIV将不再被选中。

    我想做点类似的事情来增加所选分区的文本的大小。无论如何,也可以很酷地进行其他更改,所以我更喜欢更改class属性。

    在JavaScript中,最好的方法是什么?有没有任何javascript框架可以推动我做这件事?所以很容易添加褪色等效果…

    我下载了moootools,但是由于对文档的快速阅读,在没有任何表单div的特定ID的情况下,我看不到如何做到这一点,但这是我第一次使用它。我使用任何其他框架都没有问题,但是如果您建议使用其他框架,请同时编写我应该特别寻找的内容。

    5 回复  |  直到 6 年前
        1
  •  6
  •   Tomalak    16 年前

    我建议您查看jquery以了解您的任务。学习起来很容易,而且效果很快。但仅凭你所描述的效果,纯javascript就足够了。

    让你的沙发总是有一个叫做“可选”的类。稍后您可以切换其他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");
        }
      );
    });
    

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

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

        2
  •  7
  •   Konrad Rudolph    16 年前

    这个问题还有一个纯粹的CSS解决方案。但是,它在MSIE6中不起作用。从技术上讲,它的工作原理与tomalek的解决方案类似,但它不使用javascript来切换元素的类,而是使用css来切换其样式:

    .selectable { /* basic styles …  */ }
    .selectable:hover { /* hover styles … */ }
    .selectable:active { /* focus styles … */ }
    
        3
  •  2
  •   cllpse    16 年前

    @ Tomalak:

    为什么要查询四次DOM?

    一个小的编辑,但一个巨大的速度效益:

    $("div.selectable").mouseover(function ()
    {
        // ...
    }).mouseout(function ()
    {
        // ...
    });
    
        4
  •  1
  •   Slokun    16 年前

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

    <label for="username">Username</label>
    <input type="text" name="username" value="Enter your username..." id="username" />
    
        5
  •  0
  •   Slokun    16 年前

    另一个与最初的问题答案无关,但是…jquery还有一个可选的语法来执行mouseover/mouseout操作,叫做hover。

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

    例子,

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

    对不起,我花了两块钱,我好像想不出怎么逃出去。

    推荐文章