Question

在下面的代码中，在mouseover上传递和删除鼠标（mouseout和li）时，我只想更改与li对应的元素}，在这种情况下，a内的标记i和li，与代码的CSS相同（标记{{1}的背景和颜色） }用悬停改变了。我现在遇到的问题是，当我触发事件时，不是仅仅更改鼠标所在的i内的元素，所有元素都会立即受到影响。

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

li

Answer 1

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

工作示例，没有JS

＆＃13;

* {
    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
}

＆＃13;

<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>

＆＃13;

JSbin url https://jsbin.com/lahuvi/edit?html,output 对这样的事情使用css更好。

当触发数组元素上的事件（使用querySelectorAll）时，触发来自其中的另一个数组的元素（也使用querySelectAll）

1 个答案: