如何在鼠标悬停在下拉菜单上时停止幻灯片放映 [英] how to stop slideshow while mouse hover's on drop down menu

问题描述

我有一个带有下拉菜单的菜单栏。当我悬停时，我会显示下拉列表。我在这个菜单栏下面还有一个幻灯片横幅div'#slideshow'。当幻灯片放映到下一张图像时，下拉菜单会受到干扰。也就是说，它会消失并再次显示，直到我将鼠标停留在此下拉菜单上。如何使这个下拉菜单不受干扰因为这个幻灯片放映。我认为这个幻灯片的功能应该停止，直到鼠标停在下拉菜单上。可能吗？在css中，我尝试过.menubar ul li ul li a：hover> #slideshow

{

display：none;

}

I have a menu bar with some drop down menus. When I hover, I display dropdowns. I also have a slideshow banner div '#slideshow' beneath this menu bar. The drop down menus are getting disturbed when the slide show moves to the next image. That is, it disappears and displays again until such time I keep the mouse over this drop down menu. How to make this drop down menu not disturbed because of this slide show. I think that the functioning of this slide show should be stopped until such time the mouse is over the dropdown menu. Is it possible? In css I tried with .menubar ul li ul li a:hover>#slideshow
{
display:none;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript">
       debugger;
       function slideShow() {

           var showing = $('#slideshow a.show');
           var next = showing.next().length ? showing.next() : showing.parent().children(':first');
           var timer;

           showing.fadeOut(800, function() { next.fadeIn(600).addClass('show'); }).removeClass('show');

           setTimeout(slideShow, 5000);

       }
       $(document).ready(function() {
           slideShow();
       });
       </script>

.menubar ul li ul li a:hover>#slideshow
{
 display:none;
}

 /*menu bar area ends*/

/*slide show starts*/


  #slideshow
  {
     margin-left:-230px;
     margin-top:66px;
  width:850px;
  height:189px;
 -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

}

#slideshow a{
    display:none;
}

#slideshow a:first-child {
    display: block;
 }
#slideshow .show
{
    width:800px;
}
/*slide show ends*/

推荐答案

（'＃slideshow a.show'）;
var next = shows.next（）。length？ shows.next（）：showing.parent（）。children（'：first'）;
var timer;

shows.fadeOut（800，function（）{next.fadeIn（600）.addClass（'show'）;}）。removeClass（'show'）;

setTimeout（slideShow，5000）;

}

('#slideshow a.show'); var next = showing.next().length ? showing.next() : showing.parent().children(':first'); var timer; showing.fadeOut(800, function() { next.fadeIn(600).addClass('show'); }).removeClass('show'); setTimeout(slideShow, 5000); }

（document）.ready（function（）{
slideShow（）;
}）;
< / script >

(document).ready(function() { slideShow(); }); </script>

.menubar ul li ul li a:hover>#slideshow
{
 display:none;
}

 /*menu bar area ends*/

/*slide show starts*/


  #slideshow
  {
     margin-left:-230px;
     margin-top:66px;
  width:850px;
  height:189px;
 -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

}

#slideshow a{
    display:none;
}

#slideshow a:first-child {
    display: block;
 }
#slideshow .show
{
    width:800px;
}
/*slide show ends*/

您需要在页面脚本中定义一个切换，并且幻灯片放映功能仅在切换未设置。然后将您的菜单项悬停事件链接到该切换::

You'll want to define a toggle in the page script, and have the slideshow function only execute if the toggle is not set. Then link your menu item hover events to that toggle::

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript">
       debugger;
       var canSlide = true; //this is your toggle variable
       function slideShow() {
           if(canSlide) //check if toggle is set
           {
               var showing =

这篇关于如何在鼠标悬停在下拉菜单上时停止幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！