3

jQuery 新手，无法完全弄清楚如何实现我想要做的事情。服务器只能使用 HTML - 没有可用的 PHP 或 Ruby（我还不熟悉这些语言）。我也在使用最新的 jQuery 1.10.2

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

到目前为止，我有它，所以它有点工作，但问题是，每当鼠标光标悬停在瓷砖上时，所有标题都会改变不透明度，而不仅仅是悬停在上面的标题。我尝试使用 .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%;
    }
}
4

3 回答 3

4

试试这个 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 即可轻松添加其他功能。例如，小屏幕的漂亮过渡或不同样式。

于 2013-10-07T17:50:28.860 回答
2

不需要 javascript 只需使用 css

menu ul li .ttl:hover {
   opacity:1.0;
}
于 2013-10-07T17:55:32.117 回答
1

$(this).find('.tt1').css('opacity', '1.0');

find()将查找类 tt1 的悬停元素的子元素。

于 2013-10-07T17:50:23.743 回答