个人中心
gpt4 book ai didi

javascript - 当触发一个数组元素上的事件时(with querySelectorAll)触发他内部另一个数组的元素(也with querySelectAll)

转载 作者：行者123 更新时间：2023-11-28 04:09:19 26 4
gpt4 key购买 nike

在下面的代码中，当在 li 上传递和移除鼠标(mouseover 和 mouseout)时，我只想更改li 对应的元素，在本例中，li 中的标签 a 和 i，在与代码的 CSS 发生的方式相同(标签 i 的背景和颜色随着悬停而改变)。我现在遇到的问题是，当我触发事件时，不是仅仅更改 li 中当前鼠标所在的元素，而是所有元素都会立即受到影响。

codepen上的完整代码: http://codepen.io/RaoniSousa/pen/wJqdNP 

function abc() {
    var liB = document.querySelectorAll('li')
        , liBArray = Array.prototype.slice.call(document.querySelectorAll('li'))
        , icons = document.querySelectorAll('li i')
        , iconsArray = Array.prototype.slice.call(document.querySelectorAll('li i'));
    //MOUSEOVER
    function changeI() {
        'use strict';
        if (iconsArray.length) {
            for (var i = 0; i < icons.length; i++) {
                iconsArray[i].style.fontSize = '2em';
            }
        }
    }
    //MOUSEOUT
    function backI() {
        'use strict';
        if (iconsArray.length) {
            for (var i = 0; i < icons.length; i++) {
                iconsArray[i].style.fontSize = '1em';
            }
        }
    }
    if (liBArray.length) {
        for (var i = 0; i < liB.length; i++) {
            liBArray[i].addEventListener("mouseover", changeI);
            liBArray[i].addEventListener("mouseout", backI);
        }
    }
}
abc();

最佳答案

您不需要使用 javascript 来实现您想要实现的目标。这一切都可以使用 css 来完成。并且您的 javascript 工作正常，它一次只影响一个 li，但是因为您添加 css 的方式影响了整个 ul 部分的设计。

工作示例，没有 JS

* {
    font-family: sans-serif;
    margin: 0 auto;
    box-shadow: border-box;
    position: relative;
}

body {
    left: 0;
    right: 0;
    margin: 0;
    background: #898989;
}

#container {
    width: 1030px;
}

a {
    text-decoration: none!important;
    outline: 0!important;
    border: 0!important
}

a:hover {
    text-decoration: none;
    outline: 0!important;
    border: 0!important
}

li {
    list-style: none
}

img {
    left: 0;
    width: 100%;
    height: auto
}

footer {
    width: 100%;
    height: 13em;
    background-color: #a8a8a8;
    text-align: center;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0e0e0
}

#footFlex {
    width: 80%;
    display: flex;
}

#footFlex > div:not(p){
    margin-top: 6%!important
}

#footFlex ul {
    display: flex;
    margin-right: 40px;
    width: 100%;
}

#footFlex .socialLinks li a {
    border: 2px solid #fff !important;
    border-radius: 50%;
    padding: 10px;
    margin: 2px 4px;
    cursor: pointer;
    transition: all .5s;
	font-size: 1em;
}

#footFlex .socialLinks li a:hover{
    background-color: #fff;
	font-size: 2em;
}

#footFlex li:hover i{
    color: #722872;
}

#footFlex li i:hover{
    background-color: transparent;
}

#footFlex li i{
    transition: all .5s;
    color: #fff
}

#footFlex div:first-child p:nth-child(2){
    width: 65%;
    left: 17.5%
}

#footFlex div p:nth-child(1){
    font-size: 1.3em
}

#footFlex div:first-child p:nth-child(2) a{
    color: #722872;
    font-weight: 400;
}

#footFlex div:first-child p:nth-child(2) a:hover {
    border-bottom: 2px solid #722872!important
}

#footFlex div:first-child p:first-child, #footFlex div:nth-child(2) p:first-child {
    margin-bottom: 1em
}

footer + div {
    height: 5.6em;
    background-color: #722872;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 5.6em;
    text-align: center
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="FreeCodeCamp.css">
</head>

<body id="about" data-spy="scroll" data-target=".navbar" data-offset="50">
 
    <footer>
    <div id="footFlex">
       <div>           
           <p>ABOUT THIS PAGE</p>
           <p>Made with <i class="fa fa-fw fa-music"></i> and <i class="fa fa-fw fa-coffee"></i> by <a href="">Justin Sane.</a></p>
       </div>
       <div>
           <p>AROUND THE WEB</p>
           <ul class="socialLinks">
              <li><a rel="nofollow" class="button social" href="https://www.linkedin.com/in/hallaathrad"><i class="fa fa-fw fa-linkedin"></i></a></li>
              <li><a rel="nofollow" class="button social" href="https://github.com/hallaathrad"><i class="fa fa-fw fa-github"></i></a></li>
              <li><a rel="nofollow" class="button social" href="https://twitter.com/hallaathrad"><i class="fa fa-fw fa-twitter"></i></a></li>
              <li><a rel="nofollow" class="button social" href="https://www.flickr.com/photos/hallaathrad/" title="My Flickr"><i class="fa fa-fw fa-flickr"></i></a></li>
           </ul>
       </div>
    </div>
    </footer>
    <div>qlip © 2017. All Rights Reversed</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="Javascript.js"></script>
</body>

</html>

JSbin 网址 https://jsbin.com/lahuvi/edit?html,output像这样的事情最好使用 css。

关于javascript - 当触发一个数组元素上的事件时(with querySelectorAll)触发他内部另一个数组的元素(也with querySelectAll)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42794001/

26 4 0
文章推荐： html - 在浏览器上放大和缩小时将内容保留在 div 中
文章推荐： css 技巧，元素后面的行
文章推荐： css - wicked_pdf(使用 wkhtmltopdf)不呈现 Font Awesome 图标
文章推荐： jquery - 在固定导航顶部栏之前显示 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com