0

你好，对不起，如果我的英语不好..

我正在研究 Jquery 4/5 天，我正在尝试在我制作的页面中使用它。我正在尝试创建一个非常简单的动画，其中 id=#opacity 的图像的某些属性随着鼠标悬停而变化，然后通过 mouseleave 恢复正常。

现在.. 使用另一个#id 作为选择器，在这种情况下为 (#p)，当鼠标悬停时，每个图像都可以正常工作，改变其不透明度。如果我删除另一个选择器，则只有第一个图像有效，而其他选择器无效。可能这是一个愚蠢的问题，但我对 jQuery 真的很陌生。

非常感谢。

$(document).ready(function(){
        animazione();
    });

    function animazione() {

    var opacity = $('#opacity, #p');

    opacity.mouseover(function(){
        $(this).animate({
            opacity: '1.0',
        },350).mouseleave(function(){
            $(this).animate({
                opacity: '0.6',
            },200);
        });
    });
    }

这是带有图像的html部分。

<div class="container_5">
        <div class="grid_1">
            <a href="#">
                <img src="img/monitor.png" id="opacity" alt="monitor" class="ambits" style="margin-top: 80px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/rulli.png" id="opacity" alt="rulli" class="ambits" style="margin-top: 75px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/lucchetto.png" id="opacity" alt="lucchetto" class="ambits" style="margin-top: 100px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/cuore.png" id="opacity" alt="cuore" class="ambits" style="margin-top: 100px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/allest.png" id="opacity" alt="allestimento" class="ambits" style="margin-top: 90px;">
            </a>
        </div>
    </div>
4

1 回答 1

1

HTML 元素的id属性定义了该特定元素的唯一标识符，因此id页面上每个属性的值都必须是唯一的。你不能有多个元素，id="opacity"因为它是无效的 HTML。

当您在$('#opacity')内部使用 jQuery 时，会使用本机 JavaScriptdocument.getElementById()函数，该函数将仅选择一个指定的元素id（通常是 DOM 中的第一个，但我不确定是否有保证）。

如果您想将元素组合在一起并一次与它们交互，请使用 aclass代替。

于 2013-02-20T15:58:04.837 回答