javascript - 用jQuery修改CSS .on mouseenter : for a specific ul li tag

Question

jQuery 新手，不太明白如何实现我想要做的事情。服务器只能使用 HTML - 没有可用的 PHP 或 Ruby(我还不熟悉这些语言)。我也在使用最新的 jQuery 1.10.2

我有一个带有图 block 的菜单，每个图 block 都有一个预览图片和一个标题功能区(具体来说)，我想要的是当鼠标光标悬停在图 block 上时，标题功能区背景会改变不透明度。

到目前为止，我已经有了它，所以它可以正常工作，但问题是，每当鼠标光标悬停在图 block 上时，所有标题都会改变不透明度，而不仅仅是悬停的标题。我尝试使用 .index 获取“li”元素的索引号，然后将其返回以用作标识符，但这并不奏效。我也尝试做这样的事情:

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
            },
            mouseleave: function () {
                $(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
            }
        });
    });
</script>

但我不知道如何继续修改 $('.tt1').css

所以这是我目前所拥有的相关代码片段......

jQuery 代码:

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $('.tt1').css('opacity', '1.0');
            },
            mouseleave: function () {
                $('.tt1').css('opacity', '0.6');
            }
        });
    });
</script>

HTML代码:

<menu>
    <ul class="collumn-left">
        <li><a href="#About"><div class="tt1">About</div></a></li>
        <li><a href="#Test"><div class="tt1">Test</div></a></li>
    </ul>
    <ul class="collumn-right">
        <li><a href="#Random"><div class="tt1">Random</div></a></li>
        <li><a href="#More"><div class="tt1">More</div></a></li>
    </ul>
</menu>

CSS代码:

/*  menu section begin */
menu {
    background-color: silver;
    box-shadow: 0 5px 10px #6A6A6A;
}
menu li {
    margin: 0;
    padding: 0;
    display: block;
}
.collumn-left,
.collumn-right {
    margin: 0;
    padding: 0;
    float: left;
}
.collumn-left a,
.collumn-right a {
    float: left;
    border: none;
    list-style: none;
    color: #000000;
    text-decoration: none;
}
.tt1 {
    background-color: grey;
    opacity: 0.6;
    font-weight: bolder;
    text-align: center;
}
.tt1:hover {
    opacity: 1.0;
}
/*  menu section end */

/*  Medium display size - Tablet devices & Desktops/Laptops */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    menu {
        min-width: 370px;
        width: 1024px;
        margin: auto;
        padding: 5px;
        box-shadow: 0 5px 10px #6A6A6A;
    }
    .collumn-left,
    .collumn-right {
        width: 512px;
    }
    .collumn-left a,
    .collumn-right a {
        width: 502px;
        height: 502px;
        margin: 5px;
        padding: 0;
    }
    .tt1 {
        margin: 325px 0 102px 0;
        font-size: 35px;
        line-height: 75px;
    }
    article {
        margin: 0 10% 0 10%;
    }
}

/*  High Display Resolution Desktops/Laptops */
@media only screen and (min-width: 1281px) {
    menu {
        min-width: 370px;
        width: 1540px;
        margin: auto;
        padding: 5px;
        box-shadow: 0 5px 10px #6A6A6A;
    }
    .collumn-left,
    .collumn-right {
        width: 770px;
    }
    .collumn-left a,
    .collumn-right a {
        width: 760px;
        height: 760px;
        margin: 5px;
        padding: 0;
    }
    .tt1 {
        margin: 500px 0 160px 0;
        font-size: 40px;
        line-height: 100px;
    }
    article {
        margin: 0 10% 0 10%;
    }
}

Answer 1

试试这个 javascript 代码:

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $(this).find(".tt1").css('opacity', '1.0');
            },
            mouseleave: function () {
                $(this).find(".tt1").css('opacity', '0.6');
            }
        });
    });
</script>

编辑:

实现此目的的另一种可能更简洁的方法如下:

CSS

.tt1:hover, .tt1.hover {
    opacity: 1.0;
}

Javascript

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $(this).find(".tt1").addClass("hover");
            },
            mouseleave: function () {
                $(this).find(".tt1").removeClass("hover");
            }
        });
    });
</script>

您只需编辑您的 CSS 即可轻松添加其他功能。例如，适合较小屏幕的漂亮过渡或不同样式。