时间戳

首页 > 解决方案 > 在悬停时获取元素 ID

javascript - 在悬停时获取元素 ID

问题描述

如果有人可以提供帮助，那就太好了。我创建了一个动画菜单。唯一的问题是，在我的 JS 中，我为所有五个按钮重复了我的代码。我试图从每个 html 元素中获取 id，以优化我的脚本，但它不起作用。请帮忙。这是我的代码：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="html/js/jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <nav>
        <div class="button-container">
            <a id="link-1" class="link" onclick="location='page1.html'; return false" href="http://Buttonname1">
                <!-- Image apparaissant au clic -->
                <img id="bottom-1-clicked" class="toggle-1" src="button58.gif">
                <!-- Image apparaissant au survol après disparition de l'image d'origine -->
                <img id="bottom-1" class="toggle-1" src="button59.gif">
                <!-- Image apparaissant au chargement de la page. Glisse vers la droite au survol puiq revient vers la gauche -->
                <img id="top-1" class="toggle-1" src="button55.gif">
                <span class="text-container">Buttonname1</span>
            </a>
        </div>
        <div class="button-container">
            <a id="link-2" class="link" onclick="location='page2.html'; return false" href="http://Buttonname2">
                <img id="bottom-2-clicked" class="toggle-2" src="button58.gif" alt="">
                <img id="bottom-2" class="toggle-2" src="button59.gif" alt="">
                <img id="top-2" class="toggle-2" src="button55.gif" alt="">
                <span class="text-container">Buttonname2</span>
            </a>
        </div>      
    </nav>
</body>
</html>

这是我的JS：

    $(document).ready(function(){
        setInterval(function() { 
        $('.link').hover(function(childs) {
            // Hovering the menu item, the first image slides to the right, discovering another image
            $(this.id).hover(function(){
                $(":nth-child(3)", this).attr('id').stop(true, false).animate({ left: 130 }, 300);
            });
            // On mouse leave, the image slides back to the left
            $(this.id).mouseleave(function(){
                $(":nth-child(3)", this).attr('id').stop(true, false).animate({ left: 0 }, 300);
            });
            // On click, the image changes, displaying a third image
            $(this.id).mousedown(function(){
                $(":nth-child(2)", this).attr('id').hide(50);
                $(":nth-child(1)", this).attr('id').show(50);
            });
        });
    }, 300 );
});

标签： javascriptjqueryanimationeventsjquery-animate

解决方案

首先，对评论感到抱歉，我没有意识到有法语，我改变了它们。

以下是我的脚本的工作方式： 按钮包含 3 个图像。第一个在加载页面时出现。悬停时，它向右滑动，发现第二张图像。在这里，当鼠标离开按钮时，第一个图像回来，向左滑动，或者当单击按钮时，第二个图像消失，发现第三个图像。

第一个悬停检测按钮的 ID。

这是CSS：

* {
    box-sizing: border-box;
}
nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 194px;
    overflow: hidden;
}
.button-container {
    display: block;
    position: relative;
    height: 39px;
}   
.text-container {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    margin: auto;
    top: 50%;
    font: 12px arial;
    font-weight: bold;
    color: #990099;
    transform: translate(0, -65%);
    vertical-align: middle;
    text-align: center;
}       
.text-container:hover {
    color: #000000;
}
.text-container:active {
    color: #990099;
}
.toggle-1 {
    position: absolute;
    top: 0;
    left: 0;
}
.toggle-2 {
    position: absolute;
    top: 0;
    left: 0;
}

推荐阅读