jquery - 在 mouseenter 和 mouseleave 上与 HTML 交互

Question

这是我的代码；我试图让按钮在悬停时变黑。

我目前的 jQuery （同样我不知道多少还在学习）：

$(document).ready(function() {
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    });
    $('div').mouseleave(function() {
        $('div').fadeTo('fast', 0.5);
    });
});

Answer 1

jsfiddle 中的问题是您没有从左侧包含 jquery ..

同样在事件处理程序中，您可能希望使用它this来定位特定元素，而不是使用$('div')它将定位页面中的所有 div。

$(document).ready(function() {
    $('div').mouseenter(function() {
        $(this).fadeTo('fast', 1);
    });
    $('div').mouseleave(function() {
        $(this).fadeTo('fast', 0.5);
    });
});

---

但是，您可以在不使用任何 javascript/jquery 的情况下执行相同的操作。但只需使用 CSS 过渡

div {
    opacity:0.5;
    border-radius:5px;
    width:20%;
    height:100%;
    background-color:black;
    text-align:center;
    border-color:blue;
    float:left;
    color:#FFFFFF;

    transition:opacity 1s; /*added this to enable transitions on opacity of divs*/
}
div:hover{
    opacity:1;
}

演示在http://jsfiddle.net/gaby/DnNkk/2/

Answer 2

在左侧菜单中，您有一个选项Chose Framework，您必须添加jQuery，而您忘记了。

演示