Question

当您悬停链接时，我正在尝试打开div。这很简单，我做得很好。但我也想在没有关闭的情况下访问div。因此，如果我将鼠标悬停在新打开的div上，它将保持打开状态。但是，如果我将鼠标悬停在div之外，我希望它能够关闭。

我还想确保如果我将鼠标悬停在div关闭的链接之外。我之前已经做了几次，但是对于我的生活，我无法将它排除在外。我记得先前使用过setTimeout，但是我的思绪已经变得很糟糕，而且已经很晚了，所以我想我也可以寻求一些帮助。

我也知道mouseenter和mouseleave会远远好于悬停在这种情况下我只是将其输入为悬停速度。

更新更改HTML不是一个选项，这是一个jquery问题，而不是HTML或CSS。

jQuery(document).ready(function($) {
  "use strict";

  $("li.true a").hover(
    function() {
      $(".open").fadeIn(1000);
    }, function() {
      $(".open").fadeOut(1000);
    }
  );

  $(".open").hover(
    function() {
      $(this).show();
    }, function() {
      $(this).fadeOut(1000);
    }
  );

});

ul,
li {
  list-style: none;
}
li {
  display: inline-block;
}
a {
  display: block;
  padding: 10px;
  background-color: black;
  color: white;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  cursor: pointer;
}
a:hover {
  color: black;
  background-color: white;
}
li.true a {
  background-color: green;
}
li.true a:hover {
  background-color: blue;
  color: green;
}
div.open {
  background-color: red;
  width: 100%;
  height: 300px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
  <ul>
    <li><a>not</a>
    </li>
    <li><a>not</a>
    </li>
    <li class="true"><a>true</a>
    </li>
    <li><a>not</a>
    </li>
    <li><a>not</a>
    </li>
  </ul>
</nav>

<div class="open"></div>

Answer 1

简单的解决方案是不要在jquery中使用hover的两个参数。当悬停在＆＃34; li.true a＆＃34;只需忽略隐藏div的第二个参数。使用null跳过div.open的悬停。

~~但如果你要求正确的方法。使用CSS进行这些类型的交互。 JS不需要这样做。~~

编辑：如果您需要在＆＃34; li.true的兄弟姐妹中隐藏它，那么＆＃34;的悬停。

＆＃13;

jQuery(document).ready(function($) {
  "use strict";

  $("li.true a").hover(
    function() {
      $(".open").fadeIn(1000);
    }
  );
  $("li:not(.true) a").hover(
    function() {
      $(".open").fadeOut(1000);
    }
  );

  $(".open").hover(null, function() {
      $(this).fadeOut(1000);
    }
  );

});

＆＃13;

ul,
li {
  list-style: none;
}
li {
  display: inline-block;
}
a {
  display: block;
  padding: 10px;
  background-color: black;
  color: white;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  cursor: pointer;
}
a:hover {
  color: black;
  background-color: white;
}
li.true a {
  background-color: green;
}
li.true a:hover {
  background-color: blue;
  color: green;
}
div.open {
  background-color: red;
  width: 100%;
  height: 300px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
  <ul>
    <li><a>not</a>
    </li>
    <li><a>not</a>
    </li>
    <li class="true"><a>true</a>
    </li>
    <li><a>not</a>
    </li>
    <li><a>not</a>
    </li>
  </ul>
</nav>

<div class="open"></div>

＆＃13;

Answer 2

将open与班级li一起移至<nav> <ul> <li><a>not</a> </li> <li><a>not</a> </li> <li class="true"> <a>true</a> <div class="open"></div> </li> <li><a>not</a> </li> <li><a>not</a> </li> </ul> </nav>作为子元素。现在JS对你的案例来说也更简单了。你可以在这里找到小提琴：https://jsfiddle.net/ej5gkgat/。

ul,
li {
  list-style: none;
}
li {
  display: inline-block;
}
a {
  display: block;
  padding: 10px;
  background-color: black;
  color: white;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  cursor: pointer;
}
a:hover {
  color: black;
  background-color: white;
}
li.true a {
  background-color: green;
}
li.true a:hover {
  background-color: blue;
  color: green;
}
div.open {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 300px;
  display: none;
}

新CSS：

jQuery(document).ready(function($) {
  "use strict";

  $("li.true").hover(
    function() {
      $(".open").fadeIn(1000);
    }, function() {
      $(".open").fadeOut(1000);
    }
  );
});

新JS：

val result: DataFrame = sqlContext.read.json(path)
result.write.json("/yourPath")

Answer 3

使用此js它使用超时

jQuery(document).ready(function($) {
 "use strict"; 
 var t;
 $("li.true a, .open").hover( function() { 
    clearTimeout (t);
   $(".open").fadeIn(1000); 
 }, function() { 
     clearTimeout (t);
    t = setTimeout(function(){
      $(".open").fadeOut(1000); 
    },1000);
 } ); 
});

Answer 4

你可以尝试不超时（不是很大的粉丝），但使用fadeTo（）和stop（）

不透明度用于检查可见性并计算估计剩余淡入淡出时间。 JSFiddle example

jQuery(document).ready(function($) {
  "use strict";

    var fadeout = 1000;
    var fadein = 800;

    $("li.true a").hover(function() {
        var opacity = $(".open").css("opacity");
        opacity = opacity && opacity < 0.8 ? opacity : 0;
        $(".open").stop(true).fadeTo(fadein*(1-opacity), 1);
    }, function() {
        var opacity = $(".open").css("opacity");
        if (opacity > 0) $(".open").fadeTo(fadeout, 0);
    });    

    $(".open").hover(function() {
        var opacity = $(this).css("opacity");
        if (opacity > 0) $(this).stop(true).fadeTo(fadein*(1-opacity), 1);
    }, function() {
        $(this).fadeTo(fadeout, 0);
    });   

});

Answer 5

你只能用css执行此操作：

            body{ font-family:sans-serif; }
            nav {
                background:blue;
                padding:12px;
            }

            ul {
                list-style:none;

            }
            ul li {
                display:inline-block;
                padding:6px;
                border:1px inset white;
                cursor:pointer;
                transition:all .5s;
                background:red;
            }

            ul li:hover {
                background:white;
                color:black;
            }
            ul ul {
                display:none;
            }
            ul li:hover > ul {
                display:inherit;
                position:absolute;
                top:68px;
                float:none;
            }
            ul ul li {
                display:inherit;
                float:none;
                position:relative;
                left:-47px;
            }

HTML：

<nav>
            <ul>
                <li> Example.com </li>
                <li> Languages 
                    <ul>
                        <li> HTML </li>
                        <li> CSS </li>
                        <li> Javascript </li>
                    </ul>
                </li>
                <li> Something
                    <ul>
                        <li> Something </li>
                    </ul>
                </li>
            </ul>
        </nav>

在鼠标输入时打开div并保持打开

5 个答案: