Question

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

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

到目前为止，我已经拥有了它，因此它有点工作，但问题是每当鼠标光标悬停在一个磁贴上时，所有标题都会改变不透明度，而不仅仅是悬停在其上的那个。我尝试使用.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即可轻松添加其他功能。例如，较小的屏幕有一个很好的过渡或不同的风格。

Answer 2

不需要javascript只使用css

menu ul li .ttl:hover {
   opacity:1.0;
}

Answer 3

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

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

用jQuery修改CSS .on mouseenter：用于特定的ul li标签

3 个答案: