Question

嗨，我正在尝试当我将鼠标悬停在某些图像上时显示详细信息。我使用了JS ...它仅适用于第一张图像，而不适用于其余图像

下面给出了代码

还添加了图片以供参考。

    <div class="portfolio-item">
        <div class = "ourworks-photobox">

            <div class = "item branding">
                <img class = "ourworks-photo module" src = "reference/Branding-paper.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>enter code here
    </div>

            <div class = "item branding">
                <img class = "ourworks-photo module" src = "reference/Branding-paper.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>
            </div>

            <div class = "item seo">
                <img class = "ourworks-photo module" src = "reference/seo.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>
            </div>

            <div class = "item seo">
                <img class = "ourworks-photo module" src = "reference/seo.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>
            </div>


            <div style = "clear:both";></div>
            <div class = "item web">
                <img class = "ourworks-photo module" src = "reference/webdesign.jpg" alt ="paper"> 
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>

            </div>

            <div class = "item web">
                <img class = "ourworks-photo module" src = "reference/webdesign.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>
            </div>

            <div class = "item seo">
                <img class = "ourworks-photo module" src = "reference/seo.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>
            </div>

            <div class = "item web">
                <img class = "ourworks-photo module" src = "reference/webdesign.jpg" alt ="paper">
                <div class = "opacity1">
                    <div class = "op_links">
                        <a href = "https://www.facebook.com"><i class="fab fa-facebook"></i></a>
                        <a href = "https://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    </div>
                    <h1>Hello World</h1>
                </div>
            </div>
        </div>
    </div>

我添加的Javascript代码是..这些仅适用于第一张图片，而不适用于其他图片..我在下面添加了一个屏幕截图，仅供参考

     document.querySelector('.branding').addEventListener('mouseover',function(){ document.querySelector('.opacity1').style.display = "block";
    });       `document.querySelector('.branding').addEventListener('mouseout',function(){
    document.querySelector('.opacity1').style.display = "none";
    });`

Answer 1

document.querySelector仅将选择与选择器Element匹配的第一个.branding。您应该使用document.querySelectorAll返回一个NodeList，然后您可以对其进行迭代，并将addEventListener遍历到每个Element。

document.querySelectorAll('.branding').forEach(function(node) {
  node.addEventListener('mouseover', function() {
    node.querySelector('.opacity1').style.display = 'block';
  });

  node.addEventListener('mouseout', function() {
    node.querySelector('.opacity1').style.display = 'none';
  });

});

JS-DOM：将鼠标悬停在图像上并显示详细信息

1 个答案: