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>

在jQuery中嵌套事件触发器？

1 个答案: