在鼠標上打開div並保持打開狀態

我試圖在懸停鏈接時打開div。這很簡單，我做得很好。但我也想在沒有關閉的情況下訪問div。因此，如果我將鼠標懸停在新打開的div上，它將保持打開狀態。但是如果我徘徊在div之外，我希望它關閉。在鼠標上打開div並保持打開狀態

我也想確保如果我將鼠標懸停在div關閉的鏈接之外。我已經做了幾次，但在我的生活中，我無法將其排除。我記得以前使用setTimeout，但我的腦子已經糊塗了，所以遲到了，所以我認爲我不妨尋求一些幫助。

我也知道mouseenter和mouseleave會比懸停在這種情況下好得多，我只是將它鍵入爲懸停速度。

UPDATE 更改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>

來源

2015-07-19 DCdaz

爲什麼不使用CSS：爲此懸停？儘可能在JS上使用CSS是個不錯的主意。 –

無法使用CSS，因爲它不是一個直接的兄弟姐妹，並且在激活器的容器之外 – DCdaz

不要因爲對一個不好的答案的批評而投棄權票。 – DCdaz

使用這個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); 
}); 
});

來源

2015-07-19 21:16:00

對不起，此代碼不會執行任何操作。 – DCdaz

這很奇怪你是否在控制檯中出現任何錯誤 –

現在工作我已經發現你的未更新代碼 – DCdaz

簡單的辦法就是不要在jQuery中使用懸停的兩個參數。當懸停在「li.true a」時，只需忽略隱藏div的第二個參數。使用null跳過div.open的懸停。

~~但如果你問的是正確的方法。使用CSS進行這些類型的交互。 JS不需要這樣做。~~

編輯：如果您需要在「li.true a」的懸停的同胞中隱藏它。

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); 
 
    } 
 
); 
 

 
});

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>

來源

2015-07-19 20:58:51 risyasin

只有這部分解決了這個問題。因爲除非你輸入，否則div保持打開狀態。 – DCdaz

仍然最密集的解決，因爲現在你有問題，如果你沒有懸停鏈接的div保持打開 – DCdaz

什麼時候你想要「div.open」隱藏？ – risyasin

-1

你可以只用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>

來源

2015-07-19 21:05:06 TricksfortheWeb

這不是接近我的原始HTML對不起。 – DCdaz

不，但它工作得很好，它消除了無數堆'id's的需要。 – TricksfortheWeb

犛牛沒有無盡的堆ID也是這是一個JQuery的問題編輯HTML或CSS將不會被視爲解決方案。對不起 – DCdaz

與類open移動div到li作爲孩子的Elemen噸。 JS現在對你的情況也更簡單了。你可以在這裏找到小提琴：https://jsfiddle.net/ej5gkgat/。

<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>

新建CSS：

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; 
}

新的JS：

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

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

來源

2015-07-19 21:06:51

更改html不是解決方案，如果它只是移動html的問題我不需要使用JS – DCdaz

你可以嘗試做它沒有超時（不的粉絲），但用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); 
    }); 

});

來源

2015-07-19 22:26:37 JungleZombie

在鼠標上打開div並保持打開狀態

回答

相關問題