On the front page of a site I am building, several <div>s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the <div>s contains a <form> which, using jQuery, will keep the border if an input within it has focus. This works perfectly except that IE6 does not support :hover on any elements other than <a>s. So, for this browser only we are using jQuery to mimic CSS :hover using the $(#element).hover() method. The only problem is, now that jQuery handles both the form focus() and hover(), when an input has focus then the user moves the mouse in and out, the border goes away.

我在想我们可以用一些条件来阻止这种行为。例如,如果我们在鼠标移出时测试任何输入是否有焦点,我们可以阻止边界消失。AFAIK,在jQuery中没有:focus选择器,所以我不确定如何做到这一点。什么好主意吗?


当前回答

使用类来标记元素状态的替代方法是内部数据存储功能。

附注:您可以使用data()函数存储布尔值和任何您想要的值。这不仅仅是关于字符串:)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

然后就是访问元素状态的问题了。

其他回答

您是否考虑过使用mouseOver和mouseOut来模拟这种情况。还可以查看mouseEnter和mouseLeave

我不完全确定你在追求什么,但这听起来像它可以通过存储输入元素的状态(或div?)作为一个变量来实现:

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

没有专注,但有选择 http://docs.jquery.com/Selectors/selected

但是如果你想要根据所选择的内容来改变事物的外观,你可能应该使用模糊事件。

http://docs.jquery.com/Events/blur

我设置了一个.live(“focus”)事件来选择()(突出显示)文本输入的内容,这样用户就不必在输入新值之前选择它。

$ (formObj) .select ();

由于不同浏览器之间的奇怪之处,选择有时会被引起它的点击所取代,它会取消选择内容后,将光标放置在文本字段中(在FF中工作得很好,但在IE中失败)

我想我可以通过稍微延迟选择来解决这个问题…

setTimeout(函数(){$ (formObj) .select ();}, 200);

这工作得很好,选择将持续存在,但一个有趣的问题出现了。如果您从一个字段切换到下一个字段,那么在选择发生之前,焦点将切换到下一个字段。由于select窃取焦点,焦点将返回并触发一个新的“焦点”事件。这最终导致输入选择在屏幕上跳来跳去。

一个可行的解决方案是在执行select()之前检查字段是否仍然有焦点,但如前所述,没有简单的方法来检查…我最终只是放弃了整个自动高亮,而不是把应该是一个jQuery select()调用变成一个包含子例程的巨大函数……

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });