Question

我有这样的标记：

<div class="wrapper-header">
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav">
<li class=""><a href="#" class="toggle">Show Categories</a></li>
</ul>
</div>
</div>

<div class="wrapper-categories">
<div class="container">
Content Here
</div>
</div>

默认情况下，.wrapper-categories为display: none;，因此只会点击一次显示：

 $(".toggle").on('click', function (event){
               event.preventDefault();
               $(".wrapper-categories").slideToggle("fast");
                 $(this).html(function(i,html) {
                     if (html.indexOf('Browse') != -1 ){
                        html = html.replace('Show','Hide');
                     } else {
                        html = html.replace('Hide','Show');
                     }
                     return html;
                 });
             });

现在，我想将其更改为显示在hover而不是click上，.wrapper-categories如果有人将鼠标移动并关闭则$(".toggle").hover(function() {保持打开状态＃39;不在链接或内容div上了。

我尝试将其更改为#include <stdio.h> #include <stdlib.h> #define THREADS 1024 __global__ void kernel(int *global, int threads) { extern __shared__ int cache[]; int tid = threadIdx.x + 1; int offset = blockIdx.x * blockDim.x; int number = offset + tid; cache[tid - 1] = global[number]; __syncthreads(); int start = offset + 1; int end = offset + threads; for (int i = start; i <= end; i++) { if ((i != tid) && (tid != 1) && (i % tid == 0)) { cache[i - offset - 1] = 1; } } __syncthreads(); global[number] = cache[tid - 1]; } int main(int argc, char *argv[]) { int *array, *dev_array; int n = atol(argv[1]); int n_sqrt = floor(sqrt((double)n)); size_t array_size = n * sizeof(int); array = (int*) malloc(n * sizeof(int)); array[0] = 1; array[1] = 1; for (int i = 2; i < n; i++) { array[i] = 0; } cudaMalloc((void**)&dev_array, array_size); cudaMemcpy(dev_array, array, array_size, cudaMemcpyHostToDevice); int threads = min(n_sqrt, THREADS); int blocks = n / threads; int shared = threads * sizeof(int); kernel<<<blocks, threads, shared>>>(dev_array, threads); cudaMemcpy(array, dev_array, array_size, cudaMemcpyDeviceToHost); int count = 0; for (int i = 0; i < n; i++) { if (array[i] == 0) { count++; } } printf("Count: %d\n", count); return 0; }并将其更有效，但它并未保持开放状态。我还能做什么？

Answer 1

您的代码无法按照您希望的方式运行，因为.toggle的悬停事件仅适用于自身。只要您尝试将鼠标光标移动到内容上，即在.wrapper-categories下，光标就会超出.toggle范围。

以下是您需要如何实现此功能的实例。您需要使用 ul 和 li 的简单结构稍微更改要创建的菜单的结构。

这是FIDDLE。

<强> HTML ：

<ul class="nav navbar-nav">
<li class="menu"><a href="#" class="toggle">Show Categories</a>
    <ul>
        <li>
            Content Here
        </li>
        <li>
            Content Here
        </li>
        <li>
            Content Here
        </li>

    </ul>
</li>
</ul>

<强> JS ：

$(".menu").mouseover(function(){
    $(this).find('ul').css('visibility', 'visible');    
});
$(".menu").mouseout(function(){
    $(this).find('ul').css('visibility', 'hidden'); 
});

<强> CSS ：

.menu > ul{
    visibility:hidden;
}
.menu > ul > li:hover{
    font-weight:bold;
}

Answer 2

以下是您的问题的解决方案。 https://jsfiddle.net/44wrL4g4/2/

我将所有内容都包含在menu课程中。

我使用mouseleave()代替mouseout()。有关这些函数，请参阅Jquery文档。

请参阅代码以进一步了解。

在鼠标移开时打开一个div并保持打开直到移出鼠标？

2 个答案: