jquery - 在 jQuery 中嵌套事件触发器？

Question

我是 jQuery 的新手，所以我很难表述我的问题。

如何在另一个事件中触发一个事件？

我的情况:我正在网站的页脚制作社交图标菜单。当我将鼠标悬停在 div 容器上时，我希望所有图标都从灰色变为白色。当我将鼠标悬停在单个图标上时，我希望该图标从白色变为黄色。

我可以让每个事件单独发生，但不能同时发生。

//event on the div container id=social
$("#social").mouseover(function(){
  $(".socicon").css("color", "white");
  }).mouseleave(function(){
  $(".socicon").css("color", "grey");
});

//event on the p class=socicon
$(".socicon").mouseover(function(){
  $(this).css("color", "yellow");
  }).mouseleave(function(){
  $(this).css("color", "white");
});

我如何让它们协同工作？为什么他们现在不一起工作？

谢谢!

Answer 1

这可以(也应该)严格使用 CSS 来完成:

.social-icon-menu {
  background: #CCC;
  width: 500px;
  margin: 0px auto;
  text-align: center;
}
.social-icon-menu ul { list-style-type: none; padding: 0px; }
.social-icon-menu li { display: inline-block; margin: 10px; }
.social-icon-menu a { color: gray; }
.social-icon-menu:hover a { color: white; }
.social-icon-menu:hover a:hover { color: yellow; }

<footer>
    <nav class="social-icon-menu">
        <ul>
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </nav>
</footer>

...但是，如果您想知道为什么您的基于 jQuery 的解决方案不起作用，这似乎是因为样式如何相互覆盖。为避免覆盖相同的样式，请将一种颜色选项应用于父元素并使用 color: inherit 作为默认值。见片段:

//event on the div container id=social
$('#social').mouseover(function(){
    $('#social').css('color', 'white');
}).mouseleave(function(){
    $('#social').css('color', '');
});

//event on the p class=socicon
$('.socicon').mouseover(function(){
    $(this).css('color', 'yellow');
}).mouseleave(function(){
    $(this).css('color', 'inherit');
});

.social-icon-menu { background: #CCC; width: 500px; margin: 0px auto; text-align: center; color: gray }
.social-icon-menu ul { list-style-type: none; padding: 0px; }
.social-icon-menu li { display: inline-block; margin: 10px; }
.social-icon-menu a { color: inherit; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
    <nav class="social-icon-menu">
        <ul id="social">
            <li><a href="#" class="socicon">link 1</a></li>
            <li><a href="#" class="socicon">link 2</a></li>
            <li><a href="#" class="socicon">link 3</a></li>
            <li><a href="#" class="socicon">link 4</a></li>
        </ul>
    </nav>
</footer>