Question

过去几个小时我一直试图解决这个问题，但无法让它发挥作用。

我正在使用包含3个其他div的div：

<div id="main" class="box">                             
    <div class="index"></div>
    <div class="content"></div>
    <div class="options"></div>
</div>

最终我希望div与类.options在点击div“main”后显示，使用jQuery，首先找到相关的后代，然后应用.show（）或toggle（）函数。不幸的是，我无法让它工作，甚至尝试应用简单的.css样式更改都无法正常工作。这是jQuery代码：

$(document).ready(function() {
    $('#main').on(mouseenter: function(event) {
        $(this).find('.options').css("background" , "red")})
});

这是jsfiddle

任何线索？

Answer 1

尝试：

$(document).ready(function() {
    $('#main').on("click", function() {
        $(this).find('.options').css("background" , "red");
    })
});

Answer 2

对于mouseenter，它应如下所示：

$(document).ready(function() {
    $('html').on('mouseenter','#main', function(event) {
        $(this).find('.options').css("background" , "red")})
});

点击只需将'mouseenter'替换为'click'

Answer 3

好的，你的代码是正确的，但问题是JQuery事件绑定器sintax。

阅读JQuery .on() Docs

该方法的语法是：

.on（events [，selector] [，data]，handler）

成为事件参数的描述：

<强>事件
  输入： 字符串
  一个或多个空格分隔的事件类型和可选的命名空间，例如＆＃34; click＆＃34;或＆＃34; keydown.myPlugin＆＃34;。

所以，第一个参数是一个字符串。你以一种毫无意义的方式传递过来：

$('#main').on(mouseenter: function(event) {

它应该在哪里：

$('#main').on("mouseenter", function(event) {

Working Fiddle

如何将jQuery .css样式应用于后代div

3 个答案: