Question

如果有人可以帮助我，我真的很感激。

我只想悬停一个div并显示另一个div然后我想悬停那个div但是div仍然打开

代码段：

＆＃13;

$(function(){
	$('.navigation li').hover(
  	function(){
    	$('.navigation-dropdown').toggleClass('visible');
    }
    );
});

＆＃13;

.navigation{
  color: #ffffff;
  background-color: #000000;
  height: 20px;
  width: 100%;
}
.navigation li{
  display: inline-block;
}
.navigation-dropdown{
  background-color:red;
  display: none;
}
.visible{
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <a href=""><li>home</li></a>
    <a href=""><li>about</li></a>
    <a href=""><li>contact</li></a>
  </ul>
</div>
<div class="navigation-dropdown">
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>
</div>

＆＃13;

https://jsfiddle.net/7okx2Lrx/7/

Answer 1

更改以下代码

$('.navigation-dropdown').toggleClass('visible');

到

$('.navigation-dropdown').addClass('visible');

Answer 2

您需要在代码中进行一些更改。其中一个变体是：

$(function(){
  $('.navigation li').hover(
    function(){
      $('.navigation-dropdown').addClass('visible');
    }
  );
  $('.navigation-dropdown').hover(function(){}, function(){
    $(this).removeClass('visible');
  }) 
});

https://jsfiddle.net/7okx2Lrx/11/

Answer 3

仅当鼠标位于元素上时，悬停才起作用。你应该将你的第二个元素放在第一个元素中，然后当你将第二个元素悬停时，你将保留在第一个元素中。

工作示例： https://jsfiddle.net/7okx2Lrx/8/ 我删除了高度和垂直边距：

  <div class="slideshow">
    <table>
      <tr>
        <td class="icon_circle" ><img width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
        <td class="icon_circle"><img  width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
        <td class="icon_circle"><img width="90px"  src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
      </tr>
    </table>
    <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
  </div>

Answer 4

将.toggleClass('visible')更改为.addClass('visible')：

$(function(){
	$('.navigation li').hover(
  	function(){
    	$('.navigation-dropdown').addClass('visible');
    }
    );
});

.navigation{
  color: #ffffff;
  background-color: #000000;
  height: 20px;
  width: 100%;
}
.navigation li{
  display: inline-block;
}
.navigation-dropdown{
  background-color:red;
  display: none;
}
.visible{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <a href=""><li>home</li></a>
    <a href=""><li>about</li></a>
    <a href=""><li>contact</li></a>
  </ul>
</div>
<div class="navigation-dropdown">
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>
</div>

Answer 5

你是说这样的意思吗？

我是在没有javascript的情况下完成的。

使用＆＃34; +＆＃34;你可以选择同一级别的下一个元素。

.navigation:hover + .navigation-dropdown, .navigation-dropdown:hover{
    display: block;
}

并从ul

中删除了边距

ul{margin: 0;}

https://jsfiddle.net/7okx2Lrx/10/

jquery悬停div并显示另一个div然后保持div打开

5 个答案: