Question

我一直在查看问题，但我找不到我正在寻找的东西..

我想知道如何创建一个执行以下操作的函数：

如果您将元素悬停在该元素上更改为蓝色例如
如果你取消它，它会改变回来默认
如果单击它（焦点），它会保留悬停效果的蓝色即使你取消它也
如果你点击（模糊），它就会消失回到默认颜色和鼠标悬停效果再次起作用

我该怎么做;）？

Answer 1

更新：不要使用jQuery。

纯CSS解决方案：

<input type="text" value="Test Element" id="test"/>

<style>
    #test:hover, #test:focus { color: blue; }
</style>

这里的jsFiddle演示：https://jsfiddle.net/ngkybcvz/

使用不同的CSS类可能是一种解决方案。

.elementHovered { color : blue; }
.elementFocused { color : blue; }


<input type="text" value="Test Element" id="test"/>

$("#test").hover(function() {
    $(this).addClass("elementHovered");
}, function() {
    $(this).removeClass("elementHovered");
});


$("#test").focus(function() {
    $(this).addClass("elementFocused");
});

$("#test").blur(function() {
    $(this).removeClass("elementFocused");
});

这里的jsFiddle演示：http://jsfiddle.net/ZRADe/

Answer 2

取决于你想要使用哪些元素，如果你是为了输入，我建议使用focusin，而不是焦点。

但它看起来像这样。

$(document).ready(function() {
    $("li").hover(
    function () {
        $(this).addClass('.blue');
    }, 
    function () {
        $(this).removeClass('.blue');
    }
    );

    $("li").click(function() {
        $("li").removeClass('.blue');
        $(this).addClass('.blue');
    });

});

Answer 3

我只需设置一个标志，然后让每个函数按照您的意愿执行。

所以悬停不会设置标志并且行为正常，来回变换。但是悬停中的第二个功能，如果设置的标志将由点击设置并且由模糊设置未设置，则取消悬停功能将不会更改回默认值...

JQUERY HOVER：

http://api.jquery.com/hover/

Answer 4

您的前3个要求很简单。仅使用CSS和hover选择器

可以轻松完成1 + 2

对于3，您需要使用JQuery更改元素的类，如此

$('#MyElement').removeClass('RegularClass');
$('#MyElement').addClass('SelectedClass');

关于您的第4项要求，您可能需要查看可能达到所需要的JQuery's focusout event。

Answer 5

1和2：使用CSS。

喜欢：

在CSS中（模糊是基类）：

.blurry{background:red;}
.blurry:hover{background:blue;}
.focused{background:blue;}

IN js：

$(document).ready(function() {
    $('#elementID').focus($(this).addClass('focused').removeClass('blurry');)
    });)
    $('#elementID').blur($(this).addClass('blurry').removeClass('focused');)
});

CSS将处理mouseover / mouseout事件，而无需与DOM进行交互。其余的js完成了：）

Answer 6

我试图用div做一些非常相似的事情，这对我来说最有用：

var focusColor = "#008BFF";
var hoverColor = "#6FBEFF";

var clicked = false;

elem.focusin(
   function () {
       clicked = true;
       elem.css({ "border-color": focusColor });
   }
);

elem.focusout(
   function () {
       clicked = false;
       elem.css({ "border-color": "" });
   }
);

elem.hover(
   function () {
       if (clicked) {
           elem.css({ "border-color": focusColor });
       }
       else {
           elem.css({ "border-color": hoverColor });
       }
   },
   function () {
       if (clicked) {
           elem.css({ "border-color": focusColor });
       }
       else {
           elem.css({ "border-color": "" });
       }
   }
);

Jquery：悬停/取消悬停与模糊/焦点相结合

6 个答案: