Question

我想将悬停效果赋予特定div，但该div不是该div的子代，我将其悬停

我有代码，所以，你可以理解

$(".pannel-icon").click(function(){
    $(".opening-menu").toggleClass('show');
});

body{overflow:hidden}
a{cursor:pointer}
.opening-menu{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
.main-menu{float:right}
.show{right:0;transition:0.2s all linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="main-menu">
  <span>coins:$100</span>
  <a class="pannel-icon">
    <span class="pannel-menu-hover">Menu</span>
  </a>
</div>
<div class="opening-menu">
  <ul>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
  </ul>
</div>

在此代码中，我希望在我悬停.opening-menu时悬停.pannel-icon。

Answer 1

是你的答案吗？

$(".pannel-icon, .opening-menu").hover(function(){
    $(".opening-menu").toggleClass('show');
});

body{overflow:hidden}
a{cursor:pointer}
.opening-menu{float:right;position:absolute;right:-100px; top: 10px;transition:0.2s all linear}
.main-menu{float:right}
.show{right:0;transition:0.2s all linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="main-menu">
  <span>coins:$100</span>
  <a class="pannel-icon">
    <span class="pannel-menu-hover">Menu</span>
  </a>
</div>
<div class="opening-menu">
  <ul>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
  </ul>
</div>

Answer 2

我想我知道你在说什么，请查看这个小提琴：https://jsfiddle.net/nhnb9a5g/1/。如果将鼠标悬停在“菜单”上，则会出现菜单，但只要您尝试单击某个项目，该菜单就会消失？

如果是这样，请查看此修订后的小提琴：https://jsfiddle.net/zm93hL3e/3/

添加以下jQuery：

$(".pannel-icon, .opening-menu").hover(function(){
    $(".opening-menu").toggleClass('show');
});

Answer 3

您可以使用jquery悬停功能或选择器来实现此目的。但我更喜欢将开头菜单放在链接中。这样，当你在菜单中悬停一个项目时，它总是徘徊。

Answer 4

如果我已正确理解您的问题，您是否要更改名为opening-menu的类中的CSS属性，对吧？

因此，您可以添加CSS：

.opening-menu:hover{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}

完整的CSS代码将是：

body{overflow:hidden}
a{cursor:pointer}
.opening-menu:hover{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
.main-menu{float:right}
.show:hover{right:0;transition:0.2s all linear}

或者，你可以使用这样的javascript函数：

    $(".pannel-icon").hover(hoverDiv);

    function hoverDiv(){
    $(".opening-menu").css({
    'float':'right';
    'position':'absolute';
    'right':'-100px'; 
    'top': '50px';
    'transition':'0.2s'}) 
}

如何使用css为下一个div提供悬停效果

4 个答案: